react-autoql 3.5.1 → 3.5.2

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.
@@ -269,7 +269,7 @@
269
269
  text-decoration: none;
270
270
  white-space: nowrap;
271
271
  cursor: pointer;
272
- color: var(--react-autoql-accent-color); }
272
+ color: var(--react-autoql-accent-color) !important; }
273
273
  .react-autoql-condition-link:hover {
274
274
  opacity: 0.9; }
275
275
 
@@ -277,7 +277,7 @@
277
277
  text-decoration: none;
278
278
  white-space: nowrap;
279
279
  cursor: pointer;
280
- color: var(--react-autoql-accent-color); }
280
+ color: var(--react-autoql-accent-color) !important; }
281
281
  .react-autoql-condition-link-filtered .react-autoql-custom-icon {
282
282
  font-size: 14px;
283
283
  vertical-align: middle;
@@ -297,152 +297,6 @@
297
297
  min-height: 26px;
298
298
  min-width: 300px; }
299
299
 
300
- .react-autoql-bar-container {
301
- position: relative;
302
- display: flex;
303
- flex-direction: row; }
304
-
305
- .react-autoql-chatbar-input {
306
- padding: 10px;
307
- padding-left: 20px;
308
- margin: 10px;
309
- height: 42px;
310
- width: calc(100% - 20px);
311
- white-space: nowrap;
312
- box-sizing: border-box;
313
- border-radius: 24px;
314
- font-size: 16px;
315
- font-family: inherit;
316
- letter-spacing: 0.04em;
317
- outline: none !important;
318
- width: calc(100% - 20px);
319
- font-family: inherit;
320
- /* Default styles outside of data messenger */
321
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
322
- background: var(--react-autoql-background-color-primary);
323
- color: #5d5d5d; }
324
-
325
- .react-autoql-chatbar-input.left-padding {
326
- padding-left: 54px; }
327
-
328
- .react-autoql-chatbar-input:disabled {
329
- background: rgba(0, 0, 0, 0.03); }
330
-
331
- .react-autoql-chatbar-input:not(:disabled):hover {
332
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
333
-
334
- .react-autoql-chatbar-input::-moz-placeholder {
335
- /* Default color outside of data messenger */
336
- color: #999 !important; }
337
-
338
- .react-autoql-chatbar-input:-ms-input-placeholder {
339
- /* Default color outside of data messenger */
340
- color: #999 !important; }
341
-
342
- .react-autoql-chatbar-input::placeholder {
343
- /* Default color outside of data messenger */
344
- color: #999 !important; }
345
-
346
- /* autosuggest */
347
- .react-autoql-bar-container .react-autosuggest__container,
348
- .react-autoql-chatbar-input-container {
349
- position: relative;
350
- flex: 1; }
351
-
352
- .react-autoql-bar-container .react-autosuggest__input--focused {
353
- outline: none; }
354
-
355
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
356
- display: none; }
357
-
358
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
359
- display: none; }
360
-
361
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
362
- position: absolute;
363
- top: 45px;
364
- bottom: unset;
365
- margin: 10px;
366
- padding-top: 5px;
367
- padding-bottom: 5px;
368
- display: block;
369
- width: calc(100% - 20px);
370
- height: unset;
371
- border-radius: 24px;
372
- font-family: inherit;
373
- font-size: 15px;
374
- font-weight: normal;
375
- z-index: 2;
376
- overflow: hidden;
377
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
378
- /* Default styles outside of data messenger */
379
- background-color: white;
380
- color: #5d5d5d; }
381
-
382
- .react-autoql-bar-container.autosuggest-top
383
- .react-autosuggest__suggestions-container--open {
384
- top: unset;
385
- bottom: 45px; }
386
-
387
- .react-autoql-bar-container.autosuggest-bottom
388
- .react-autosuggest__suggestions-container--open {
389
- top: 45px;
390
- bottom: unset; }
391
-
392
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
393
- margin: 0;
394
- padding: 0;
395
- list-style-type: none; }
396
-
397
- /* Autocomplete styles */
398
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
399
- background-color: var(--react-autoql-background-color-primary);
400
- border: 1px solid var(--react-autoql-border-color);
401
- color: var(--react-autoql-text-color-primary); }
402
-
403
- .react-autoql-bar-container .react-autosuggest__suggestion {
404
- color: var(--react-autoql-text-color-primary); }
405
-
406
- .react-autoql-chatbar-input {
407
- border: 1px solid var(--react-autoql-border-color);
408
- color: var(--react-autoql-text-color-primary); }
409
-
410
- .react-autoql-chatbar-input::-moz-placeholder {
411
- color: var(--react-autoql-text-color-placeholder); }
412
-
413
- .react-autoql-chatbar-input:-ms-input-placeholder {
414
- color: var(--react-autoql-text-color-placeholder); }
415
-
416
- .react-autoql-chatbar-input::placeholder {
417
- color: var(--react-autoql-text-color-placeholder); }
418
-
419
- .react-autoql-bar-container .react-autosuggest__suggestion {
420
- cursor: pointer;
421
- padding: 2px;
422
- padding-left: 18px;
423
- letter-spacing: 0.05em;
424
- line-height: 22.5px; }
425
-
426
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
427
- background-color: rgba(0, 0, 0, 0.1) !important; }
428
-
429
- .react-autoql-bar-container .react-autosuggest__section-title {
430
- padding: 10px 0 0 10px;
431
- font-size: 12px;
432
- color: #777; }
433
-
434
- .input-response-loading-container {
435
- position: absolute;
436
- right: 23px;
437
- top: -2px; }
438
-
439
- .chat-bar-input-icon {
440
- position: absolute;
441
- color: #28a8e0;
442
- font-size: 20px;
443
- left: 30px;
444
- top: 15px; }
445
-
446
300
  .chat-voice-record-button {
447
301
  width: 40px;
448
302
  height: 40px;
@@ -666,6 +520,152 @@ span.react-autoql-icon {
666
520
  font-weight: bold;
667
521
  cursor: pointer; }
668
522
 
523
+ .react-autoql-bar-container {
524
+ position: relative;
525
+ display: flex;
526
+ flex-direction: row; }
527
+
528
+ .react-autoql-chatbar-input {
529
+ padding: 10px;
530
+ padding-left: 20px;
531
+ margin: 10px;
532
+ height: 42px;
533
+ width: calc(100% - 20px);
534
+ white-space: nowrap;
535
+ box-sizing: border-box;
536
+ border-radius: 24px;
537
+ font-size: 16px;
538
+ font-family: inherit;
539
+ letter-spacing: 0.04em;
540
+ outline: none !important;
541
+ width: calc(100% - 20px);
542
+ font-family: inherit;
543
+ /* Default styles outside of data messenger */
544
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
545
+ background: var(--react-autoql-background-color-primary);
546
+ color: #5d5d5d; }
547
+
548
+ .react-autoql-chatbar-input.left-padding {
549
+ padding-left: 54px; }
550
+
551
+ .react-autoql-chatbar-input:disabled {
552
+ background: rgba(0, 0, 0, 0.03); }
553
+
554
+ .react-autoql-chatbar-input:not(:disabled):hover {
555
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
556
+
557
+ .react-autoql-chatbar-input::-moz-placeholder {
558
+ /* Default color outside of data messenger */
559
+ color: #999 !important; }
560
+
561
+ .react-autoql-chatbar-input:-ms-input-placeholder {
562
+ /* Default color outside of data messenger */
563
+ color: #999 !important; }
564
+
565
+ .react-autoql-chatbar-input::placeholder {
566
+ /* Default color outside of data messenger */
567
+ color: #999 !important; }
568
+
569
+ /* autosuggest */
570
+ .react-autoql-bar-container .react-autosuggest__container,
571
+ .react-autoql-chatbar-input-container {
572
+ position: relative;
573
+ flex: 1; }
574
+
575
+ .react-autoql-bar-container .react-autosuggest__input--focused {
576
+ outline: none; }
577
+
578
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
579
+ display: none; }
580
+
581
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
582
+ display: none; }
583
+
584
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
585
+ position: absolute;
586
+ top: 45px;
587
+ bottom: unset;
588
+ margin: 10px;
589
+ padding-top: 5px;
590
+ padding-bottom: 5px;
591
+ display: block;
592
+ width: calc(100% - 20px);
593
+ height: unset;
594
+ border-radius: 24px;
595
+ font-family: inherit;
596
+ font-size: 15px;
597
+ font-weight: normal;
598
+ z-index: 2;
599
+ overflow: hidden;
600
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
601
+ /* Default styles outside of data messenger */
602
+ background-color: white;
603
+ color: #5d5d5d; }
604
+
605
+ .react-autoql-bar-container.autosuggest-top
606
+ .react-autosuggest__suggestions-container--open {
607
+ top: unset;
608
+ bottom: 45px; }
609
+
610
+ .react-autoql-bar-container.autosuggest-bottom
611
+ .react-autosuggest__suggestions-container--open {
612
+ top: 45px;
613
+ bottom: unset; }
614
+
615
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
616
+ margin: 0;
617
+ padding: 0;
618
+ list-style-type: none; }
619
+
620
+ /* Autocomplete styles */
621
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
622
+ background-color: var(--react-autoql-background-color-primary);
623
+ border: 1px solid var(--react-autoql-border-color);
624
+ color: var(--react-autoql-text-color-primary); }
625
+
626
+ .react-autoql-bar-container .react-autosuggest__suggestion {
627
+ color: var(--react-autoql-text-color-primary); }
628
+
629
+ .react-autoql-chatbar-input {
630
+ border: 1px solid var(--react-autoql-border-color);
631
+ color: var(--react-autoql-text-color-primary); }
632
+
633
+ .react-autoql-chatbar-input::-moz-placeholder {
634
+ color: var(--react-autoql-text-color-placeholder); }
635
+
636
+ .react-autoql-chatbar-input:-ms-input-placeholder {
637
+ color: var(--react-autoql-text-color-placeholder); }
638
+
639
+ .react-autoql-chatbar-input::placeholder {
640
+ color: var(--react-autoql-text-color-placeholder); }
641
+
642
+ .react-autoql-bar-container .react-autosuggest__suggestion {
643
+ cursor: pointer;
644
+ padding: 2px;
645
+ padding-left: 18px;
646
+ letter-spacing: 0.05em;
647
+ line-height: 22.5px; }
648
+
649
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
650
+ background-color: rgba(0, 0, 0, 0.1) !important; }
651
+
652
+ .react-autoql-bar-container .react-autosuggest__section-title {
653
+ padding: 10px 0 0 10px;
654
+ font-size: 12px;
655
+ color: #777; }
656
+
657
+ .input-response-loading-container {
658
+ position: absolute;
659
+ right: 23px;
660
+ top: -2px; }
661
+
662
+ .chat-bar-input-icon {
663
+ position: absolute;
664
+ color: #28a8e0;
665
+ font-size: 20px;
666
+ left: 30px;
667
+ top: 15px; }
668
+
669
669
  .react-autoql-drawer {
670
670
  font-family: var(--react-autoql-font-family), sans-serif;
671
671
  line-height: 22px; }
@@ -1251,6 +1251,74 @@ span.react-autoql-icon {
1251
1251
  left: 0.5em;
1252
1252
  top: -2px; }
1253
1253
 
1254
+ .notification-modal-content .react-autoql-step-content p {
1255
+ margin-bottom: 0.5em;
1256
+ margin-top: 0.5em;
1257
+ padding-left: 8px; }
1258
+
1259
+ .notification-modal-content .step-btn-container {
1260
+ text-align: right;
1261
+ display: flex;
1262
+ min-height: 50px; }
1263
+
1264
+ .expression-valid-checkmark.react-autoql-icon svg {
1265
+ color: var(--react-autoql-success-color); }
1266
+
1267
+ .expression-invalid-message-container {
1268
+ max-width: 75%;
1269
+ float: left;
1270
+ text-align: left !important;
1271
+ display: flex;
1272
+ flex-direction: row;
1273
+ align-items: left;
1274
+ justify-content: left; }
1275
+
1276
+ .expression-invalid-message {
1277
+ color: var(--react-autoql-danger-color);
1278
+ display: 'inline-block'; }
1279
+
1280
+ .notification-rule-add-btn-outer,
1281
+ .notification-rule-validate-btn-outer {
1282
+ text-align: center;
1283
+ border-style: dashed !important;
1284
+ height: 38px;
1285
+ line-height: 25px;
1286
+ margin: 0 !important;
1287
+ overflow: hidden; }
1288
+
1289
+ .notification-rule-outer-container {
1290
+ position: relative;
1291
+ border: 1px solid transparent;
1292
+ border-radius: 4px; }
1293
+ .notification-rule-outer-container.outlined {
1294
+ border-color: rgba(0, 0, 0, 0.15);
1295
+ padding: 0 20px;
1296
+ padding-bottom: 12px; }
1297
+
1298
+ .notification-outer-all-any {
1299
+ position: absolute;
1300
+ left: 0;
1301
+ top: 50%; }
1302
+
1303
+ .notification-first-group-btn-container {
1304
+ display: flex;
1305
+ justify-content: space-between; }
1306
+
1307
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1308
+ border: none; }
1309
+
1310
+ .notification-rule-outer-container {
1311
+ position: relative;
1312
+ border: 1px solid transparent;
1313
+ border-radius: 4px;
1314
+ padding-bottom: 5px; }
1315
+
1316
+ .expression-error-message {
1317
+ padding-left: 5px; }
1318
+
1319
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1320
+ border: none; }
1321
+
1254
1322
  .notification-list-loading-container {
1255
1323
  text-align: center;
1256
1324
  padding-top: 100px;
@@ -1515,112 +1583,56 @@ span.react-autoql-icon {
1515
1583
  cursor: pointer; }
1516
1584
  .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1517
1585
  background-color: var(--react-autoql-background-color-secondary, #ececec); }
1518
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1519
- position: absolute;
1520
- top: -7px;
1521
- left: -7px;
1522
- color: var(--react-autoql-accent-color, #26a7df);
1523
- line-height: 10px;
1524
- background: var(--react-autoql-background-color-primary, #fff);
1525
- border-radius: 10px;
1526
- font-size: 17px; }
1527
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1528
- height: 100%;
1529
- opacity: 0;
1530
- position: absolute;
1531
- left: 0px;
1532
- top: 0;
1533
- width: 4px;
1534
- background: var(--react-autoql-accent-color, #26a7df);
1535
- transition-property: opacity;
1536
- transition-duration: 0.2s;
1537
- transition-timing-function: ease; }
1538
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1539
- flex: 0 0 50px;
1540
- padding: 10px;
1541
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1542
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
1543
- flex: 0 0 60px; }
1544
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1545
- border-radius: 50px;
1546
- height: 45px;
1547
- width: 45px;
1548
- line-height: 45px;
1549
- font-size: 22px;
1550
- color: white;
1551
- background-color: var(--react-autoql-accent-color, #26a7df);
1552
- text-align: center;
1553
- margin-top: 13px;
1554
- margin-right: 17px; }
1555
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1556
- flex: 1;
1557
- line-height: 23px;
1558
- padding: 13px 0px;
1559
- transition: color 0.2s ease; }
1560
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1561
- font-size: 18px;
1562
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1563
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1564
- font-size: 12px;
1565
- opacity: 0.5; }
1566
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1567
- margin-bottom: -1px; }
1568
-
1569
- .notification-modal-content .react-autoql-step-content p {
1570
- margin-bottom: 0.5em;
1571
- margin-top: 0.5em;
1572
- padding-left: 8px; }
1573
-
1574
- .notification-modal-content .step-btn-container {
1575
- text-align: right;
1576
- display: flex;
1577
- min-height: 50px; }
1578
-
1579
- .expression-valid-checkmark.react-autoql-icon svg {
1580
- color: var(--react-autoql-success-color); }
1581
-
1582
- .expression-invalid-message-container {
1583
- max-width: 75%;
1584
- float: left;
1585
- text-align: left !important;
1586
- display: flex;
1587
- flex-direction: row;
1588
- align-items: left;
1589
- justify-content: left; }
1590
-
1591
- .expression-invalid-message {
1592
- color: var(--react-autoql-danger-color);
1593
- display: 'inline-block'; }
1594
-
1595
- .notification-rule-add-btn-outer,
1596
- .notification-rule-validate-btn-outer {
1597
- text-align: center;
1598
- border-style: dashed !important;
1599
- height: 38px;
1600
- line-height: 25px;
1601
- margin: 0 !important;
1602
- overflow: hidden; }
1603
-
1604
- .notification-rule-outer-container {
1605
- position: relative;
1606
- border: 1px solid transparent;
1607
- border-radius: 4px; }
1608
- .notification-rule-outer-container.outlined {
1609
- border-color: rgba(0, 0, 0, 0.15);
1610
- padding: 0 20px;
1611
- padding-bottom: 12px; }
1612
-
1613
- .notification-outer-all-any {
1614
- position: absolute;
1615
- left: 0;
1616
- top: 50%; }
1617
-
1618
- .notification-first-group-btn-container {
1619
- display: flex;
1620
- justify-content: space-between; }
1621
-
1622
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1623
- border: none; }
1586
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1587
+ position: absolute;
1588
+ top: -7px;
1589
+ left: -7px;
1590
+ color: var(--react-autoql-accent-color, #26a7df);
1591
+ line-height: 10px;
1592
+ background: var(--react-autoql-background-color-primary, #fff);
1593
+ border-radius: 10px;
1594
+ font-size: 17px; }
1595
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1596
+ height: 100%;
1597
+ opacity: 0;
1598
+ position: absolute;
1599
+ left: 0px;
1600
+ top: 0;
1601
+ width: 4px;
1602
+ background: var(--react-autoql-accent-color, #26a7df);
1603
+ transition-property: opacity;
1604
+ transition-duration: 0.2s;
1605
+ transition-timing-function: ease; }
1606
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1607
+ flex: 0 0 50px;
1608
+ padding: 10px;
1609
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1610
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
1611
+ flex: 0 0 60px; }
1612
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1613
+ border-radius: 50px;
1614
+ height: 45px;
1615
+ width: 45px;
1616
+ line-height: 45px;
1617
+ font-size: 22px;
1618
+ color: white;
1619
+ background-color: var(--react-autoql-accent-color, #26a7df);
1620
+ text-align: center;
1621
+ margin-top: 13px;
1622
+ margin-right: 17px; }
1623
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1624
+ flex: 1;
1625
+ line-height: 23px;
1626
+ padding: 13px 0px;
1627
+ transition: color 0.2s ease; }
1628
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1629
+ font-size: 18px;
1630
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1631
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1632
+ font-size: 12px;
1633
+ opacity: 0.5; }
1634
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1635
+ margin-bottom: -1px; }
1624
1636
 
1625
1637
  .react-autoql-notification-settings {
1626
1638
  background-color: var(--react-autoql-background-color-secondary);
@@ -1714,18 +1726,6 @@ span.react-autoql-icon {
1714
1726
  align-items: center;
1715
1727
  margin-top: -25px; }
1716
1728
 
1717
- .notification-rule-outer-container {
1718
- position: relative;
1719
- border: 1px solid transparent;
1720
- border-radius: 4px;
1721
- padding-bottom: 5px; }
1722
-
1723
- .expression-error-message {
1724
- padding-left: 5px; }
1725
-
1726
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1727
- border: none; }
1728
-
1729
1729
  .react-autoql-step-container a {
1730
1730
  color: var(--react-autoql-accent-color, #26a7df); }
1731
1731
 
@@ -2249,6 +2249,50 @@ span.react-autoql-icon {
2249
2249
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2250
2250
  background: inherit; }
2251
2251
 
2252
+ .react-autoql-btn {
2253
+ border-radius: 4px;
2254
+ cursor: pointer;
2255
+ outline: none !important;
2256
+ transition: all 0.2s ease;
2257
+ width: auto;
2258
+ display: inline-block; }
2259
+
2260
+ .react-autoql-btn.disabled {
2261
+ opacity: 0.4;
2262
+ cursor: not-allowed;
2263
+ pointer-events: none; }
2264
+
2265
+ .react-autoql-btn.small {
2266
+ padding: 2px 8px;
2267
+ margin: 2px 3px; }
2268
+
2269
+ .react-autoql-btn.large {
2270
+ padding: 5px 16px;
2271
+ margin: 2px 5px; }
2272
+
2273
+ .react-autoql-btn.default {
2274
+ color: inherit;
2275
+ border: 1px solid var(--react-autoql-border-color);
2276
+ background: inherit; }
2277
+ .react-autoql-btn.default:hover {
2278
+ border-color: var(--react-autoql-accent-color);
2279
+ color: var(--react-autoql-accent-color); }
2280
+
2281
+ .react-autoql-btn.primary {
2282
+ background: var(--react-autoql-accent-color);
2283
+ border: 1px solid var(--react-autoql-accent-color);
2284
+ color: white; }
2285
+ .react-autoql-btn.primary:hover {
2286
+ opacity: 0.8; }
2287
+
2288
+ .react-autoql-btn.danger {
2289
+ color: var(--react-autoql-danger-color, #ca0b00);
2290
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2291
+ background: inherit; }
2292
+ .react-autoql-btn.danger:hover {
2293
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2294
+ color: #fff; }
2295
+
2252
2296
  .react-autoql-table-container {
2253
2297
  height: 100%;
2254
2298
  max-width: 100%;
@@ -2418,50 +2462,6 @@ the whole table when the filter button is clicked */
2418
2462
  .comparison-value-negative {
2419
2463
  color: #e80000; }
2420
2464
 
2421
- .react-autoql-btn {
2422
- border-radius: 4px;
2423
- cursor: pointer;
2424
- outline: none !important;
2425
- transition: all 0.2s ease;
2426
- width: auto;
2427
- display: inline-block; }
2428
-
2429
- .react-autoql-btn.disabled {
2430
- opacity: 0.4;
2431
- cursor: not-allowed;
2432
- pointer-events: none; }
2433
-
2434
- .react-autoql-btn.small {
2435
- padding: 2px 8px;
2436
- margin: 2px 3px; }
2437
-
2438
- .react-autoql-btn.large {
2439
- padding: 5px 16px;
2440
- margin: 2px 5px; }
2441
-
2442
- .react-autoql-btn.default {
2443
- color: inherit;
2444
- border: 1px solid var(--react-autoql-border-color);
2445
- background: inherit; }
2446
- .react-autoql-btn.default:hover {
2447
- border-color: var(--react-autoql-accent-color);
2448
- color: var(--react-autoql-accent-color); }
2449
-
2450
- .react-autoql-btn.primary {
2451
- background: var(--react-autoql-accent-color);
2452
- border: 1px solid var(--react-autoql-accent-color);
2453
- color: white; }
2454
- .react-autoql-btn.primary:hover {
2455
- opacity: 0.8; }
2456
-
2457
- .react-autoql-btn.danger {
2458
- color: var(--react-autoql-danger-color, #ca0b00);
2459
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2460
- background: inherit; }
2461
- .react-autoql-btn.danger:hover {
2462
- background-color: var(--react-autoql-danger-color, #ca0b00);
2463
- color: #fff; }
2464
-
2465
2465
  .ReactModal__Overlay {
2466
2466
  background-color: transparent !important;
2467
2467
  transition: background-color 0.2s ease-in-out;
@@ -2542,41 +2542,6 @@ the whole table when the filter button is clicked */
2542
2542
  .react-autoql-modal-close-btn:hover {
2543
2543
  opacity: 1 !important; }
2544
2544
 
2545
- .autoql-options-toolbar {
2546
- position: absolute;
2547
- background: inherit;
2548
- padding: 5px;
2549
- border-radius: 6px;
2550
- line-height: 28px;
2551
- background: var(--react-autoql-background-color-primary);
2552
- border: 1px solid var(--react-autoql-border-color); }
2553
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2554
- display: block; }
2555
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2556
- color: var(--react-autoql-accent-color); }
2557
-
2558
- .copy-sql-modal-content {
2559
- position: relative;
2560
- height: 60vh; }
2561
- .copy-sql-modal-content .copy-sql-formatted-text {
2562
- height: 100%;
2563
- width: 100%;
2564
- padding: 10px;
2565
- resize: none;
2566
- background: var(--react-autoql-background-color-secondary); }
2567
- .copy-sql-modal-content .copy-sql-btn {
2568
- color: var(--react-autoql-text-color);
2569
- background-color: var(--react-autoql-background-color-primary);
2570
- position: absolute;
2571
- top: 3px;
2572
- right: 0;
2573
- opacity: 0;
2574
- transition: opacity 0.3s ease; }
2575
- .copy-sql-modal-content .sql-copied {
2576
- color: var(--react-autoql-success-color) !important; }
2577
- .copy-sql-modal-content:hover .copy-sql-btn {
2578
- opacity: 1; }
2579
-
2580
2545
  .query-tips-page-container {
2581
2546
  height: 100%;
2582
2547
  padding: 10px; }
@@ -2749,6 +2714,41 @@ the whole table when the filter button is clicked */
2749
2714
  100% {
2750
2715
  opacity: 1; } }
2751
2716
 
2717
+ .autoql-options-toolbar {
2718
+ position: absolute;
2719
+ background: inherit;
2720
+ padding: 5px;
2721
+ border-radius: 6px;
2722
+ line-height: 28px;
2723
+ background: var(--react-autoql-background-color-primary);
2724
+ border: 1px solid var(--react-autoql-border-color); }
2725
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2726
+ display: block; }
2727
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2728
+ color: var(--react-autoql-accent-color); }
2729
+
2730
+ .copy-sql-modal-content {
2731
+ position: relative;
2732
+ height: 60vh; }
2733
+ .copy-sql-modal-content .copy-sql-formatted-text {
2734
+ height: 100%;
2735
+ width: 100%;
2736
+ padding: 10px;
2737
+ resize: none;
2738
+ background: var(--react-autoql-background-color-secondary); }
2739
+ .copy-sql-modal-content .copy-sql-btn {
2740
+ color: var(--react-autoql-text-color);
2741
+ background-color: var(--react-autoql-background-color-primary);
2742
+ position: absolute;
2743
+ top: 3px;
2744
+ right: 0;
2745
+ opacity: 0;
2746
+ transition: opacity 0.3s ease; }
2747
+ .copy-sql-modal-content .sql-copied {
2748
+ color: var(--react-autoql-success-color) !important; }
2749
+ .copy-sql-modal-content:hover .copy-sql-btn {
2750
+ opacity: 1; }
2751
+
2752
2752
  .react-autoql-cascader {
2753
2753
  position: relative;
2754
2754
  white-space: nowrap;
@@ -3026,6 +3026,9 @@ so we dont have to redraw the whole table */
3026
3026
  transform: scale(1);
3027
3027
  transform-origin: 0% 100%; } }
3028
3028
 
3029
+ .react-autoql-condition-lock-menu {
3030
+ min-width: 400px !important; }
3031
+
3029
3032
  .react-autoql-filter-locking-title-container {
3030
3033
  display: inline-block;
3031
3034
  width: 100%;
@@ -3036,6 +3039,7 @@ so we dont have to redraw the whole table */
3036
3039
  float: left;
3037
3040
  color: var(--react-autoql-text-color-primary);
3038
3041
  margin-bottom: 0;
3042
+ margin-top: 0;
3039
3043
  display: block;
3040
3044
  font-size: 1.17em !important;
3041
3045
  font-weight: bold; }
@@ -3048,7 +3052,8 @@ so we dont have to redraw the whole table */
3048
3052
  cursor: pointer;
3049
3053
  color: var(--react-autoql-hover-color); }
3050
3054
 
3051
- .react-autoql-filter-locking-empty-list {
3055
+ #react-autoql-filter-description-id {
3056
+ visibility: hidden;
3052
3057
  color: var(--react-autoql-text-color-primary);
3053
3058
  background-color: var(--react-autoql-background-color-secondary);
3054
3059
  border-radius: 5px;
@@ -3059,13 +3064,18 @@ so we dont have to redraw the whole table */
3059
3064
  top: 20px;
3060
3065
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3061
3066
  z-index: 999999; }
3062
- .react-autoql-filter-locking-empty-list span {
3067
+ #react-autoql-filter-description-id span {
3063
3068
  color: var(--react-autoql-accent-color); }
3064
- .react-autoql-filter-locking-empty-list p {
3069
+ #react-autoql-filter-description-id p {
3065
3070
  width: 96%;
3066
3071
  float: right;
3067
3072
  margin-bottom: 0; }
3068
3073
 
3074
+ #react-autoql-filter-description-id.show {
3075
+ visibility: visible;
3076
+ -webkit-animation: fadeIn 1s;
3077
+ animation: fadeIn 1s; }
3078
+
3069
3079
  .react-autoql-condition-locking-input {
3070
3080
  padding: 5px;
3071
3081
  padding-left: 20px;
@@ -3081,37 +3091,34 @@ so we dont have to redraw the whole table */
3081
3091
  font-family: inherit;
3082
3092
  /* Default styles outside of data messenger */
3083
3093
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3084
- background: var(--react-autoql-background-color-secondary);
3094
+ background: var(--react-autoql-background-color-primary);
3085
3095
  color: var(--react-autoql-text-color-primary); }
3086
3096
  .react-autoql-condition-locking-input::-moz-placeholder {
3087
- color: var(--react-autoql-text-color-placeholder) !important; }
3097
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
3088
3098
  .react-autoql-condition-locking-input:-ms-input-placeholder {
3089
- color: var(--react-autoql-text-color-placeholder) !important; }
3099
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
3090
3100
  .react-autoql-condition-locking-input::placeholder {
3091
- color: var(--react-autoql-text-color-placeholder) !important; }
3101
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
3092
3102
 
3093
3103
  .react-autoql-condition-locking-input:hover {
3094
3104
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
3095
3105
 
3096
3106
  .react-autoql-condition-table {
3097
3107
  min-width: 95%;
3098
- margin: 10px auto; }
3108
+ margin: 10px auto;
3109
+ table-layout: fixed; }
3099
3110
 
3100
3111
  .react-autoql-condition-table thead {
3101
- padding-left: 10px; }
3102
-
3103
- .react-autoql-condition-table th {
3104
- text-align: left;
3105
- padding: 4px;
3106
- margin: 0 10px 0 10px;
3107
- font-weight: 800; }
3108
- .react-autoql-condition-table th span {
3109
- color: var(--react-autoql-accent-color); }
3112
+ padding-left: 10px;
3113
+ display: table-header-group;
3114
+ width: 100%;
3115
+ flex: 1 1 auto; }
3110
3116
 
3111
3117
  .react-autoql-condition-table .react-autoql-condition-table-list-item {
3112
3118
  text-overflow: ellipsis;
3113
3119
  white-space: nowrap;
3114
- overflow: hidden; }
3120
+ overflow: hidden;
3121
+ width: 60%; }
3115
3122
 
3116
3123
  .react-autoql-condition-lock-menu-footer {
3117
3124
  bottom: 0;
@@ -3139,17 +3146,50 @@ so we dont have to redraw the whole table */
3139
3146
  .react-autoql-accept-conditions-button span:hover {
3140
3147
  opacity: 1; }
3141
3148
 
3142
- .react-autoql-condition-table td {
3143
- text-align: left;
3144
- padding: 4px;
3145
- margin: 0 10px 0 10px;
3149
+ .react-autoql-condition-list {
3150
+ padding: 0;
3151
+ margin: 0 auto;
3152
+ min-height: 182px; }
3153
+
3154
+ tbody::-webkit-scrollbar {
3155
+ -webkit-appearance: none;
3156
+ width: 7px; }
3157
+
3158
+ tbody::-webkit-scrollbar-thumb {
3159
+ border-radius: 5px;
3160
+ background-color: rgba(0, 0, 0, 0.5);
3161
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
3162
+
3163
+ .react-autoql-condition-list .react-autoql-condition-table thead {
3164
+ text-align: left;
3165
+ width: 100%;
3166
+ margin: 0 10px 0 10px;
3167
+ font-weight: 800; }
3168
+ .react-autoql-condition-list .react-autoql-condition-table thead span {
3169
+ color: var(--react-autoql-accent-color);
3170
+ padding: 5px; }
3171
+
3172
+ .react-autoql-condition-list .react-autoql-condition-table tbody {
3173
+ display: block;
3174
+ overflow-y: scroll;
3175
+ max-height: 260px;
3176
+ width: 100%;
3177
+ flex: 1 1 auto;
3178
+ padding-left: 10px; }
3179
+
3180
+ .react-autoql-condition-list .react-autoql-condition-table tr {
3181
+ display: table;
3182
+ table-layout: fixed;
3183
+ width: 100%; }
3184
+
3185
+ .react-autoql-condition-list .react-autoql-condition-table th {
3186
+ display: table-cell;
3146
3187
  padding-left: 10px; }
3147
3188
 
3148
- .react-autoql-condition-list {
3149
- padding: 0;
3150
- margin: 0 auto;
3151
- overflow-y: scroll;
3152
- min-height: 182px; }
3189
+ .react-autoql-condition-list td {
3190
+ display: table-cell;
3191
+ padding: 2px;
3192
+ padding-left: 10px; }
3153
3193
 
3154
3194
  .react-autoql-condition-list-loading-container {
3155
3195
  display: flex;
@@ -3248,7 +3288,8 @@ so we dont have to redraw the whole table */
3248
3288
  font-size: 12px;
3249
3289
  color: #777; }
3250
3290
 
3251
- .react-autoql-filter-setting-info-card {
3291
+ #react-autoql-filter-setting-info-card {
3292
+ visibility: hidden;
3252
3293
  color: var(--react-autoql-text-color-primary);
3253
3294
  background-color: var(--react-autoql-background-color-secondary);
3254
3295
  border-radius: 5px;
@@ -3259,13 +3300,32 @@ so we dont have to redraw the whole table */
3259
3300
  top: 40px;
3260
3301
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3261
3302
  z-index: 9999; }
3262
- .react-autoql-filter-setting-info-card span {
3303
+ #react-autoql-filter-setting-info-card span {
3263
3304
  color: var(--react-autoql-accent-color); }
3264
- .react-autoql-filter-setting-info-card p {
3305
+ #react-autoql-filter-setting-info-card p {
3265
3306
  margin-bottom: 0 !important; }
3266
- .react-autoql-filter-setting-info-card p span {
3307
+ #react-autoql-filter-setting-info-card p span {
3267
3308
  color: var(--react-autoql-accent-color); }
3268
3309
 
3310
+ .react-autoql-highlight-row {
3311
+ background-color: var(--react-autoql-accent-color);
3312
+ color: white;
3313
+ -webkit-animation-name: highlightIn, highlightOut;
3314
+ animation-name: highlightIn, highlightOut;
3315
+ -webkit-animation-duration: 400ms, 400ms;
3316
+ animation-duration: 400ms, 400ms;
3317
+ -webkit-animation-delay: 0ms, 1500ms;
3318
+ animation-delay: 0ms, 1500ms;
3319
+ -webkit-animation-timing-function: ease-in, ease-out;
3320
+ animation-timing-function: ease-in, ease-out;
3321
+ -webkit-animation-iteration-count: 1, 1;
3322
+ animation-iteration-count: 1, 1; }
3323
+
3324
+ #react-autoql-filter-setting-info-card.show {
3325
+ visibility: visible;
3326
+ -webkit-animation: fadeIn 1s;
3327
+ animation: fadeIn 1s; }
3328
+
3269
3329
  #react-autoql-condition-show-message {
3270
3330
  visibility: hidden;
3271
3331
  min-width: 200px;
@@ -3279,7 +3339,8 @@ so we dont have to redraw the whole table */
3279
3339
  top: 20px;
3280
3340
  display: block;
3281
3341
  z-index: 999999999;
3282
- transform: translateX(85%);
3342
+ left: 50%;
3343
+ transform: translate(-50%, -50%);
3283
3344
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3284
3345
  #react-autoql-condition-show-message span {
3285
3346
  color: var(--react-autoql-accent-color); }
@@ -3321,6 +3382,54 @@ so we dont have to redraw the whole table */
3321
3382
  top: 0;
3322
3383
  opacity: 0; } }
3323
3384
 
3385
+ @-webkit-keyframes fadeIn {
3386
+ from {
3387
+ opacity: 0;
3388
+ transform: translate3d(0, -20%, 0); }
3389
+ to {
3390
+ opacity: 1;
3391
+ transform: translate3d(0, 0, 0); } }
3392
+
3393
+ @keyframes fadeIn {
3394
+ from {
3395
+ opacity: 0;
3396
+ transform: translate3d(0, -20%, 0); }
3397
+ to {
3398
+ opacity: 1;
3399
+ transform: translate3d(0, 0, 0); } }
3400
+
3401
+ @-webkit-keyframes highlightOut {
3402
+ 100% {
3403
+ background-color: var(--react-autoql-background-color-primary);
3404
+ color: var(--react-autoql-text-color-primary); }
3405
+ 0% {
3406
+ background-color: var(--react-autoql-accent-color);
3407
+ color: white; } }
3408
+
3409
+ @keyframes highlightOut {
3410
+ 100% {
3411
+ background-color: var(--react-autoql-background-color-primary);
3412
+ color: var(--react-autoql-text-color-primary); }
3413
+ 0% {
3414
+ background-color: var(--react-autoql-accent-color);
3415
+ color: white; } }
3416
+
3417
+ @-webkit-keyframes highlightIn {
3418
+ 100% {
3419
+ background-color: var(--react-autoql-accent-color);
3420
+ color: white; }
3421
+ 0% {
3422
+ background-color: var(--react-autoql-background-color-primary);
3423
+ color: var(--react-autoql-text-color-primary); } }
3424
+
3425
+ @keyframes highlightIn {
3426
+ 100% {
3427
+ background-color: var(--react-autoql-accent-color);
3428
+ color: white; }
3429
+ 0% {
3430
+ background-color: var(--react-autoql-background-color-primary);
3431
+ color: var(--react-autoql-text-color-primary); } }
3432
+
3324
3433
  .react-autoql-chart-container {
3325
3434
  position: relative;
3326
3435
  height: 100%;
@@ -3420,6 +3529,76 @@ so we dont have to redraw the whole table */
3420
3529
  background: var(--react-autoql-background-color-primary);
3421
3530
  padding: 5px; }
3422
3531
 
3532
+ .react-autoql-radio-btn-container {
3533
+ display: inline-block;
3534
+ border-radius: 4px; }
3535
+ .react-autoql-radio-btn-container [type='radio']:checked,
3536
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3537
+ position: absolute;
3538
+ left: -9999px; }
3539
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3540
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3541
+ position: relative;
3542
+ padding-left: 28px;
3543
+ cursor: pointer;
3544
+ line-height: 20px;
3545
+ display: inline-block; }
3546
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3547
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3548
+ content: '';
3549
+ position: absolute;
3550
+ left: 1px;
3551
+ top: 1px;
3552
+ width: 18px;
3553
+ height: 18px;
3554
+ border: 1px solid #ddd;
3555
+ border-radius: 100%;
3556
+ background: #fff; }
3557
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3558
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3559
+ content: '';
3560
+ width: 12px;
3561
+ height: 12px;
3562
+ background: var(--react-autoql-accent-color, #26a7df);
3563
+ position: absolute;
3564
+ top: 4px;
3565
+ left: 4px;
3566
+ border-radius: 100%;
3567
+ transition: all 0.2s ease; }
3568
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3569
+ opacity: 0;
3570
+ transform: scale(0); }
3571
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3572
+ opacity: 1;
3573
+ transform: scale(1); }
3574
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3575
+ position: relative;
3576
+ display: inline-block;
3577
+ padding: 3px 12px;
3578
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3579
+ margin-left: -1px;
3580
+ transition: all 0.2s ease;
3581
+ cursor: pointer; }
3582
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3583
+ background-color: var(--react-autoql-accent-color, #26a7df);
3584
+ border-color: var(--react-autoql-accent-color, #26a7df);
3585
+ color: #fff;
3586
+ z-index: 3; }
3587
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3588
+ background-color: inherit;
3589
+ color: var(--react-autoql-accent-color, #26a7df);
3590
+ z-index: 3; }
3591
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3592
+ border-color: var(--react-autoql-accent-color, #26a7df);
3593
+ color: var(--react-autoql-accent-color, #26a7df);
3594
+ z-index: 2; }
3595
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3596
+ border-top-left-radius: 4px;
3597
+ border-bottom-left-radius: 4px;
3598
+ margin-left: 0; }
3599
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3600
+ border-top-right-radius: 4px;
3601
+ border-bottom-right-radius: 4px; }
3423
3602
 
3424
3603
  .react-autoql-input-container {
3425
3604
  position: relative;
@@ -3472,6 +3651,38 @@ so we dont have to redraw the whole table */
3472
3651
  opacity: 1;
3473
3652
  color: var(--react-autoql-accent-color, #26a7df); }
3474
3653
 
3654
+
3655
+ .viz-toolbar {
3656
+ position: absolute;
3657
+ background: inherit;
3658
+ padding: 5px;
3659
+ border-radius: 6px;
3660
+ line-height: 28px;
3661
+ border: 1px solid #d3d3d352; }
3662
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3663
+ display: block; }
3664
+
3665
+ .react-autoql-toolbar-btn {
3666
+ height: 28px;
3667
+ width: 28px;
3668
+ background: none;
3669
+ border: none;
3670
+ font-size: 16px;
3671
+ line-height: 28px;
3672
+ vertical-align: top;
3673
+ color: var(--react-autoql-accent-color);
3674
+ cursor: pointer;
3675
+ outline: none !important; }
3676
+
3677
+ .react-autoql-toolbar-btn.green {
3678
+ color: #2ecc40; }
3679
+
3680
+ .react-autoql-toolbar-btn.red {
3681
+ color: #e80000; }
3682
+
3683
+ .react-autoql-toolbar-btn:hover {
3684
+ opacity: 0.7; }
3685
+
3475
3686
  .react-autoql-steps-container {
3476
3687
  margin: 10px; }
3477
3688
 
@@ -3541,108 +3752,6 @@ so we dont have to redraw the whole table */
3541
3752
  transition-duration: 0.5s;
3542
3753
  opacity: 1; }
3543
3754
 
3544
- .viz-toolbar {
3545
- position: absolute;
3546
- background: inherit;
3547
- padding: 5px;
3548
- border-radius: 6px;
3549
- line-height: 28px;
3550
- border: 1px solid #d3d3d352; }
3551
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3552
- display: block; }
3553
-
3554
- .react-autoql-toolbar-btn {
3555
- height: 28px;
3556
- width: 28px;
3557
- background: none;
3558
- border: none;
3559
- font-size: 16px;
3560
- line-height: 28px;
3561
- vertical-align: top;
3562
- color: var(--react-autoql-accent-color);
3563
- cursor: pointer;
3564
- outline: none !important; }
3565
-
3566
- .react-autoql-toolbar-btn.green {
3567
- color: #2ecc40; }
3568
-
3569
- .react-autoql-toolbar-btn.red {
3570
- color: #e80000; }
3571
-
3572
- .react-autoql-toolbar-btn:hover {
3573
- opacity: 0.7; }
3574
-
3575
- .react-autoql-radio-btn-container {
3576
- display: inline-block;
3577
- border-radius: 4px; }
3578
- .react-autoql-radio-btn-container [type='radio']:checked,
3579
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3580
- position: absolute;
3581
- left: -9999px; }
3582
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3583
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3584
- position: relative;
3585
- padding-left: 28px;
3586
- cursor: pointer;
3587
- line-height: 20px;
3588
- display: inline-block; }
3589
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3590
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3591
- content: '';
3592
- position: absolute;
3593
- left: 1px;
3594
- top: 1px;
3595
- width: 18px;
3596
- height: 18px;
3597
- border: 1px solid #ddd;
3598
- border-radius: 100%;
3599
- background: #fff; }
3600
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3601
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3602
- content: '';
3603
- width: 12px;
3604
- height: 12px;
3605
- background: var(--react-autoql-accent-color, #26a7df);
3606
- position: absolute;
3607
- top: 4px;
3608
- left: 4px;
3609
- border-radius: 100%;
3610
- transition: all 0.2s ease; }
3611
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3612
- opacity: 0;
3613
- transform: scale(0); }
3614
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3615
- opacity: 1;
3616
- transform: scale(1); }
3617
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3618
- position: relative;
3619
- display: inline-block;
3620
- padding: 3px 12px;
3621
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3622
- margin-left: -1px;
3623
- transition: all 0.2s ease;
3624
- cursor: pointer; }
3625
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3626
- background-color: var(--react-autoql-accent-color, #26a7df);
3627
- border-color: var(--react-autoql-accent-color, #26a7df);
3628
- color: #fff;
3629
- z-index: 3; }
3630
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3631
- background-color: inherit;
3632
- color: var(--react-autoql-accent-color, #26a7df);
3633
- z-index: 3; }
3634
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3635
- border-color: var(--react-autoql-accent-color, #26a7df);
3636
- color: var(--react-autoql-accent-color, #26a7df);
3637
- z-index: 2; }
3638
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3639
- border-top-left-radius: 4px;
3640
- border-bottom-left-radius: 4px;
3641
- margin-left: 0; }
3642
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3643
- border-top-right-radius: 4px;
3644
- border-bottom-right-radius: 4px; }
3645
-
3646
3755
  .content {
3647
3756
  margin: 2rem; }
3648
3757
 
@@ -3946,7 +4055,6 @@ so we dont have to redraw the whole table */
3946
4055
  padding: 0 10px;
3947
4056
  color: var(--react-autoql-warning-color); }
3948
4057
 
3949
-
3950
4058
  .spinner-loader {
3951
4059
  display: inline-block;
3952
4060
  width: 14px;
@@ -3977,7 +4085,6 @@ so we dont have to redraw the whole table */
3977
4085
  100% {
3978
4086
  transform: rotate(360deg); } }
3979
4087
 
3980
-
3981
4088
  .react-autoql-select {
3982
4089
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3983
4090
  border-radius: 4px;
@@ -4016,6 +4123,8 @@ so we dont have to redraw the whole table */
4016
4123
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4017
4124
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4018
4125
 
4126
+
4127
+
4019
4128
  .slack-modal-error-container,
4020
4129
  .slack-modal-empty-list-message {
4021
4130
  display: flex;