react-autoql 4.2.1 → 4.2.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.
@@ -264,6 +264,50 @@ span.react-autoql-icon {
264
264
  border-radius: 50%;
265
265
  box-sizing: content-box; }
266
266
 
267
+ .loading-container-centered {
268
+ height: 100%;
269
+ width: 100%;
270
+ display: flex;
271
+ flex-direction: column;
272
+ justify-content: center;
273
+ align-items: center; }
274
+
275
+ .response-loading {
276
+ display: inline-block;
277
+ position: relative;
278
+ width: 64px;
279
+ height: 64px; }
280
+
281
+ .response-loading div {
282
+ position: absolute;
283
+ top: 27px;
284
+ width: 11px;
285
+ height: 11px;
286
+ border-radius: 50%;
287
+ background: #e2e2e2;
288
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
289
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
290
+
291
+ .response-loading div:nth-child(1) {
292
+ left: 6px;
293
+ -webkit-animation: response-loading1 0.6s infinite;
294
+ animation: response-loading1 0.6s infinite; }
295
+
296
+ .response-loading div:nth-child(2) {
297
+ left: 6px;
298
+ -webkit-animation: response-loading2 0.6s infinite;
299
+ animation: response-loading2 0.6s infinite; }
300
+
301
+ .response-loading div:nth-child(3) {
302
+ left: 26px;
303
+ -webkit-animation: response-loading2 0.6s infinite;
304
+ animation: response-loading2 0.6s infinite; }
305
+
306
+ .response-loading div:nth-child(4) {
307
+ left: 45px;
308
+ -webkit-animation: response-loading3 0.6s infinite;
309
+ animation: response-loading3 0.6s infinite; }
310
+
267
311
  .react-autoql-dashboard-container {
268
312
  background: var(--react-autoql-background-color-secondary);
269
313
  height: 100%;
@@ -326,50 +370,6 @@ span.react-autoql-icon {
326
370
  font-weight: bold;
327
371
  cursor: pointer; }
328
372
 
329
- .loading-container-centered {
330
- height: 100%;
331
- width: 100%;
332
- display: flex;
333
- flex-direction: column;
334
- justify-content: center;
335
- align-items: center; }
336
-
337
- .response-loading {
338
- display: inline-block;
339
- position: relative;
340
- width: 64px;
341
- height: 64px; }
342
-
343
- .response-loading div {
344
- position: absolute;
345
- top: 27px;
346
- width: 11px;
347
- height: 11px;
348
- border-radius: 50%;
349
- background: #e2e2e2;
350
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
351
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
352
-
353
- .response-loading div:nth-child(1) {
354
- left: 6px;
355
- -webkit-animation: response-loading1 0.6s infinite;
356
- animation: response-loading1 0.6s infinite; }
357
-
358
- .response-loading div:nth-child(2) {
359
- left: 6px;
360
- -webkit-animation: response-loading2 0.6s infinite;
361
- animation: response-loading2 0.6s infinite; }
362
-
363
- .response-loading div:nth-child(3) {
364
- left: 26px;
365
- -webkit-animation: response-loading2 0.6s infinite;
366
- animation: response-loading2 0.6s infinite; }
367
-
368
- .response-loading div:nth-child(4) {
369
- left: 45px;
370
- -webkit-animation: response-loading3 0.6s infinite;
371
- animation: response-loading3 0.6s infinite; }
372
-
373
373
  .filter-lock-menu {
374
374
  z-index: 99999 !important;
375
375
  transition: opacity 0.1s ease 0s !important;
@@ -600,6 +600,9 @@ span.react-autoql-icon {
600
600
  width: 100%;
601
601
  height: 100%;
602
602
  color: var(--react-autoql-text-color-primary); }
603
+ .react-autoql-response-content-container .query-output-error-message,
604
+ .react-autoql-response-content-container .no-columns-error-message {
605
+ margin: auto; }
603
606
 
604
607
  .react-autoql-response-content-container.table {
605
608
  max-height: 100vh !important;
@@ -1420,6 +1423,100 @@ span.react-autoql-icon {
1420
1423
  left: 0.5em;
1421
1424
  top: -2px; }
1422
1425
 
1426
+ .react-autoql-notification-settings {
1427
+ background-color: var(--react-autoql-background-color-secondary);
1428
+ color: var(--react-autoql-text-color-primary);
1429
+ padding-top: 20px;
1430
+ height: 100%; }
1431
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1432
+ margin: 20px;
1433
+ margin-top: 10px;
1434
+ border-radius: 4px;
1435
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1436
+ background-color: var(--react-autoql-background-color-primary);
1437
+ overflow: hidden; }
1438
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1439
+ height: 55px;
1440
+ line-height: 55px;
1441
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1442
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1443
+ margin-right: 10px;
1444
+ cursor: pointer; }
1445
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1446
+ margin-right: 10px; }
1447
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1448
+ padding-right: 20px;
1449
+ font-size: 17px;
1450
+ opacity: 1;
1451
+ cursor: pointer;
1452
+ color: var(--react-autoql-accent-color); }
1453
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1454
+ background: rgba(0, 0, 0, 0.01); }
1455
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1456
+ opacity: 0;
1457
+ margin-right: 20px;
1458
+ font-size: 16px;
1459
+ transition: all 0.2s ease;
1460
+ color: var(--react-autoql-text-color-primary);
1461
+ cursor: pointer; }
1462
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1463
+ color: var(--react-autoql-accent-color);
1464
+ opacity: 1 !important; }
1465
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1466
+ opacity: 0.5; }
1467
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1468
+ display: flex;
1469
+ justify-content: space-between;
1470
+ height: 56px;
1471
+ padding-left: 25px;
1472
+ padding-right: 8px;
1473
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1474
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1475
+ margin-bottom: 4px;
1476
+ margin-right: 8px; }
1477
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1478
+ margin-bottom: 4px;
1479
+ margin-right: 8px;
1480
+ opacity: 0.5;
1481
+ pointer-events: none; }
1482
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1483
+ display: flex;
1484
+ justify-content: space-between;
1485
+ align-items: center;
1486
+ padding: 5px 20px;
1487
+ padding-bottom: 0;
1488
+ color: var(--react-autoql-text-color-primary); }
1489
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1490
+ display: inline-block;
1491
+ height: 35px;
1492
+ width: 35px;
1493
+ border-radius: 20px;
1494
+ background: var(--react-autoql-accent-color, #26a7df);
1495
+ color: var(--react-autoql-accent-text-color);
1496
+ line-height: 38px;
1497
+ text-align: center;
1498
+ font-size: 20px;
1499
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1500
+ transition: all 0.2s ease;
1501
+ margin-right: 5px;
1502
+ cursor: pointer; }
1503
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1504
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1505
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1506
+ white-space: nowrap;
1507
+ overflow: hidden;
1508
+ text-overflow: ellipsis;
1509
+ padding-right: 10px; }
1510
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1511
+ opacity: 0.5; }
1512
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1513
+ vertical-align: middle;
1514
+ height: 18px; }
1515
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1516
+ display: flex;
1517
+ align-items: center;
1518
+ margin-top: -25px; }
1519
+
1423
1520
  .notification-list-loading-container {
1424
1521
  text-align: center;
1425
1522
  padding-top: 100px;
@@ -1518,6 +1615,75 @@ span.react-autoql-icon {
1518
1615
  opacity: 1;
1519
1616
  top: 0; } }
1520
1617
 
1618
+ .notification-rule-add-btn-outer,
1619
+ .notification-rule-validate-btn-outer {
1620
+ text-align: center;
1621
+ border-style: dashed !important;
1622
+ height: 38px;
1623
+ line-height: 25px;
1624
+ margin: 0 !important;
1625
+ overflow: hidden; }
1626
+
1627
+ .notification-rule-outer-container {
1628
+ position: relative;
1629
+ border: 1px solid transparent;
1630
+ border-radius: 4px; }
1631
+ .notification-rule-outer-container.outlined {
1632
+ border-color: rgba(0, 0, 0, 0.15);
1633
+ padding: 0 20px;
1634
+ padding-bottom: 12px; }
1635
+
1636
+ .notification-outer-all-any {
1637
+ position: absolute;
1638
+ left: 0;
1639
+ top: 50%; }
1640
+
1641
+ .notification-first-group-btn-container {
1642
+ display: flex;
1643
+ justify-content: space-between; }
1644
+
1645
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1646
+ border: none; }
1647
+
1648
+ .notification-rule-outer-container {
1649
+ position: relative;
1650
+ border: 1px solid transparent;
1651
+ border-radius: 4px;
1652
+ padding-bottom: 5px; }
1653
+
1654
+ .expression-error-message {
1655
+ padding-left: 5px; }
1656
+
1657
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1658
+ border: none; }
1659
+
1660
+ .react-autoql-step-container a {
1661
+ color: var(--react-autoql-accent-color, #26a7df); }
1662
+
1663
+ .frequency-date-select-container {
1664
+ margin-top: 10px; }
1665
+
1666
+ .notification-frequency-step {
1667
+ display: flex; }
1668
+ .notification-frequency-step .frequency-category-select {
1669
+ position: relative;
1670
+ padding-top: 9px; }
1671
+ .notification-frequency-step .notification-frequency-select {
1672
+ margin-left: 8px; }
1673
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1674
+ line-height: 33px; }
1675
+ .notification-frequency-step .frequency-repeat-follow-text {
1676
+ line-height: 32px;
1677
+ vertical-align: top; }
1678
+ .notification-frequency-step .frequency-settings-container {
1679
+ flex: 0 1 400px; }
1680
+
1681
+ .schedule-builder-timezone-section {
1682
+ margin: 10px 5px; }
1683
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1684
+ display: inline-block;
1685
+ width: 300px; }
1686
+
1521
1687
  .react-autoql-notification-list-item {
1522
1688
  display: flex;
1523
1689
  flex-direction: column;
@@ -1734,142 +1900,6 @@ span.react-autoql-icon {
1734
1900
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1735
1901
  margin-bottom: -1px; }
1736
1902
 
1737
- .notification-rule-outer-container {
1738
- position: relative;
1739
- border: 1px solid transparent;
1740
- border-radius: 4px;
1741
- padding-bottom: 5px; }
1742
-
1743
- .expression-error-message {
1744
- padding-left: 5px; }
1745
-
1746
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1747
- border: none; }
1748
-
1749
- .notification-rule-add-btn-outer,
1750
- .notification-rule-validate-btn-outer {
1751
- text-align: center;
1752
- border-style: dashed !important;
1753
- height: 38px;
1754
- line-height: 25px;
1755
- margin: 0 !important;
1756
- overflow: hidden; }
1757
-
1758
- .notification-rule-outer-container {
1759
- position: relative;
1760
- border: 1px solid transparent;
1761
- border-radius: 4px; }
1762
- .notification-rule-outer-container.outlined {
1763
- border-color: rgba(0, 0, 0, 0.15);
1764
- padding: 0 20px;
1765
- padding-bottom: 12px; }
1766
-
1767
- .notification-outer-all-any {
1768
- position: absolute;
1769
- left: 0;
1770
- top: 50%; }
1771
-
1772
- .notification-first-group-btn-container {
1773
- display: flex;
1774
- justify-content: space-between; }
1775
-
1776
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1777
- border: none; }
1778
-
1779
- .react-autoql-notification-settings {
1780
- background-color: var(--react-autoql-background-color-secondary);
1781
- color: var(--react-autoql-text-color-primary);
1782
- padding-top: 20px;
1783
- height: 100%; }
1784
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1785
- margin: 20px;
1786
- margin-top: 10px;
1787
- border-radius: 4px;
1788
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1789
- background-color: var(--react-autoql-background-color-primary);
1790
- overflow: hidden; }
1791
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1792
- height: 55px;
1793
- line-height: 55px;
1794
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1795
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1796
- margin-right: 10px;
1797
- cursor: pointer; }
1798
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1799
- margin-right: 10px; }
1800
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1801
- padding-right: 20px;
1802
- font-size: 17px;
1803
- opacity: 1;
1804
- cursor: pointer;
1805
- color: var(--react-autoql-accent-color); }
1806
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1807
- background: rgba(0, 0, 0, 0.01); }
1808
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1809
- opacity: 0;
1810
- margin-right: 20px;
1811
- font-size: 16px;
1812
- transition: all 0.2s ease;
1813
- color: var(--react-autoql-text-color-primary);
1814
- cursor: pointer; }
1815
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1816
- color: var(--react-autoql-accent-color);
1817
- opacity: 1 !important; }
1818
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1819
- opacity: 0.5; }
1820
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1821
- display: flex;
1822
- justify-content: space-between;
1823
- height: 56px;
1824
- padding-left: 25px;
1825
- padding-right: 8px;
1826
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1827
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1828
- margin-bottom: 4px;
1829
- margin-right: 8px; }
1830
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1831
- margin-bottom: 4px;
1832
- margin-right: 8px;
1833
- opacity: 0.5;
1834
- pointer-events: none; }
1835
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1836
- display: flex;
1837
- justify-content: space-between;
1838
- align-items: center;
1839
- padding: 5px 20px;
1840
- padding-bottom: 0;
1841
- color: var(--react-autoql-text-color-primary); }
1842
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1843
- display: inline-block;
1844
- height: 35px;
1845
- width: 35px;
1846
- border-radius: 20px;
1847
- background: var(--react-autoql-accent-color, #26a7df);
1848
- color: var(--react-autoql-accent-text-color);
1849
- line-height: 38px;
1850
- text-align: center;
1851
- font-size: 20px;
1852
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1853
- transition: all 0.2s ease;
1854
- margin-right: 5px;
1855
- cursor: pointer; }
1856
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1857
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1858
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1859
- white-space: nowrap;
1860
- overflow: hidden;
1861
- text-overflow: ellipsis;
1862
- padding-right: 10px; }
1863
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1864
- opacity: 0.5; }
1865
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1866
- vertical-align: middle;
1867
- height: 18px; }
1868
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1869
- display: flex;
1870
- align-items: center;
1871
- margin-top: -25px; }
1872
-
1873
1903
  .notification-modal-content .react-autoql-step-content p {
1874
1904
  margin-bottom: 0.5em;
1875
1905
  margin-top: 0.5em;
@@ -1888,40 +1918,13 @@ span.react-autoql-icon {
1888
1918
  float: left;
1889
1919
  text-align: left !important;
1890
1920
  display: flex;
1891
- flex-direction: row;
1892
- align-items: left;
1893
- justify-content: left; }
1894
-
1895
- .expression-invalid-message {
1896
- color: var(--react-autoql-danger-color);
1897
- display: 'inline-block'; }
1898
-
1899
- .react-autoql-step-container a {
1900
- color: var(--react-autoql-accent-color, #26a7df); }
1901
-
1902
- .frequency-date-select-container {
1903
- margin-top: 10px; }
1904
-
1905
- .notification-frequency-step {
1906
- display: flex; }
1907
- .notification-frequency-step .frequency-category-select {
1908
- position: relative;
1909
- padding-top: 9px; }
1910
- .notification-frequency-step .notification-frequency-select {
1911
- margin-left: 8px; }
1912
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1913
- line-height: 33px; }
1914
- .notification-frequency-step .frequency-repeat-follow-text {
1915
- line-height: 32px;
1916
- vertical-align: top; }
1917
- .notification-frequency-step .frequency-settings-container {
1918
- flex: 0 1 400px; }
1921
+ flex-direction: row;
1922
+ align-items: left;
1923
+ justify-content: left; }
1919
1924
 
1920
- .schedule-builder-timezone-section {
1921
- margin: 10px 5px; }
1922
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1923
- display: inline-block;
1924
- width: 300px; }
1925
+ .expression-invalid-message {
1926
+ color: var(--react-autoql-danger-color);
1927
+ display: 'inline-block'; }
1925
1928
 
1926
1929
  .react-autoql-dashboard .react-autoql-dashboard-tile {
1927
1930
  background: var(--react-autoql-background-color-primary, #fff);
@@ -2031,9 +2034,6 @@ span.react-autoql-icon {
2031
2034
  width: 100%;
2032
2035
  padding-top: 0;
2033
2036
  background: inherit; }
2034
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message,
2035
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .no-columns-error-message {
2036
- margin: auto; }
2037
2037
  .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
2038
2038
  height: 1px !important;
2039
2039
  color: var(--react-autoql-border-color);
@@ -2408,6 +2408,7 @@ span.react-autoql-icon {
2408
2408
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2409
2409
  background: inherit; }
2410
2410
 
2411
+
2411
2412
  .react-autoql-btn {
2412
2413
  border-radius: 4px;
2413
2414
  cursor: pointer;
@@ -2452,7 +2453,6 @@ span.react-autoql-icon {
2452
2453
  background-color: var(--react-autoql-danger-color, #ca0b00);
2453
2454
  color: #fff; }
2454
2455
 
2455
-
2456
2456
  .ReactModal__Overlay {
2457
2457
  background-color: transparent !important;
2458
2458
  transition: background-color 0.2s ease-in-out;
@@ -2619,40 +2619,59 @@ span.react-autoql-icon {
2619
2619
  border-top-right-radius: 4px;
2620
2620
  border-bottom-right-radius: 4px; }
2621
2621
 
2622
- .autoql-options-toolbar {
2623
- position: absolute;
2624
- background: inherit;
2625
- padding: 5px;
2626
- border-radius: 6px;
2627
- line-height: 28px;
2628
- background: var(--react-autoql-background-color-primary);
2629
- border: 1px solid var(--react-autoql-border-color); }
2630
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2631
- display: block; }
2632
- .autoql-options-toolbar .react-autoql-toolbar-btn {
2633
- color: var(--react-autoql-text-color-primary); }
2634
-
2635
- .copy-sql-modal-content {
2622
+ .react-autoql-cascader {
2636
2623
  position: relative;
2637
- height: 60vh; }
2638
- .copy-sql-modal-content .copy-sql-formatted-text {
2639
- height: 100%;
2624
+ white-space: nowrap;
2625
+ overflow: hidden;
2626
+ min-width: 300px; }
2627
+ .react-autoql-cascader .options-container {
2628
+ transition: max-width 0.3s ease;
2629
+ display: inline-block;
2630
+ vertical-align: top;
2631
+ padding: 0 10px;
2632
+ margin: 10px 0;
2640
2633
  width: 100%;
2641
- padding: 10px;
2642
- resize: none;
2643
- background: var(--react-autoql-background-color-secondary); }
2644
- .copy-sql-modal-content .copy-sql-btn {
2645
- color: var(--react-autoql-text-color);
2646
- background-color: var(--react-autoql-background-color-primary);
2647
- position: absolute;
2648
- top: 3px;
2649
- right: 0;
2650
- opacity: 0;
2651
- transition: opacity 0.3s ease; }
2652
- .copy-sql-modal-content .sql-copied {
2653
- color: var(--react-autoql-success-color) !important; }
2654
- .copy-sql-modal-content:hover .copy-sql-btn {
2655
- opacity: 1; }
2634
+ max-width: calc(100% - 20px);
2635
+ white-space: pre-wrap; }
2636
+ .react-autoql-cascader .options-container.hidden {
2637
+ max-width: 0; }
2638
+ .react-autoql-cascader .options-container.hidden span {
2639
+ white-space: nowrap; }
2640
+ .react-autoql-cascader .options-container.hidden .option {
2641
+ opacity: 0;
2642
+ pointer-events: none; }
2643
+ .react-autoql-cascader .options-container .options-title {
2644
+ padding: 4px;
2645
+ padding-left: 10px;
2646
+ font-weight: 600; }
2647
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2648
+ position: absolute;
2649
+ cursor: pointer;
2650
+ top: 15px;
2651
+ left: 0; }
2652
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2653
+ opacity: 0.8; }
2654
+ .react-autoql-cascader .options-container .option {
2655
+ cursor: pointer;
2656
+ padding: 4px;
2657
+ display: flex;
2658
+ justify-content: space-between;
2659
+ border-radius: 2px;
2660
+ padding-left: 10px; }
2661
+ .react-autoql-cascader .options-container .option .option-arrow {
2662
+ opacity: 0.7; }
2663
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2664
+ opacity: 0;
2665
+ color: #fff;
2666
+ font-size: 16px;
2667
+ vertical-align: middle; }
2668
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2669
+ background-color: var(--react-autoql-accent-color, #26a7df);
2670
+ color: #fff; }
2671
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2672
+ opacity: 1; }
2673
+ .react-autoql-cascader .options-container:not(:last-child) {
2674
+ border-right: 1px solid #d3d3d352; }
2656
2675
 
2657
2676
  .content {
2658
2677
  margin: 2rem; }
@@ -3001,59 +3020,40 @@ span.react-autoql-icon {
3001
3020
  transform: scale(1);
3002
3021
  transform-origin: 0% 100%; } }
3003
3022
 
3004
- .react-autoql-cascader {
3023
+ .autoql-options-toolbar {
3024
+ position: absolute;
3025
+ background: inherit;
3026
+ padding: 5px;
3027
+ border-radius: 6px;
3028
+ line-height: 28px;
3029
+ background: var(--react-autoql-background-color-primary);
3030
+ border: 1px solid var(--react-autoql-border-color); }
3031
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3032
+ display: block; }
3033
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
3034
+ color: var(--react-autoql-text-color-primary); }
3035
+
3036
+ .copy-sql-modal-content {
3005
3037
  position: relative;
3006
- white-space: nowrap;
3007
- overflow: hidden;
3008
- min-width: 300px; }
3009
- .react-autoql-cascader .options-container {
3010
- transition: max-width 0.3s ease;
3011
- display: inline-block;
3012
- vertical-align: top;
3013
- padding: 0 10px;
3014
- margin: 10px 0;
3038
+ height: 60vh; }
3039
+ .copy-sql-modal-content .copy-sql-formatted-text {
3040
+ height: 100%;
3015
3041
  width: 100%;
3016
- max-width: calc(100% - 20px);
3017
- white-space: pre-wrap; }
3018
- .react-autoql-cascader .options-container.hidden {
3019
- max-width: 0; }
3020
- .react-autoql-cascader .options-container.hidden span {
3021
- white-space: nowrap; }
3022
- .react-autoql-cascader .options-container.hidden .option {
3023
- opacity: 0;
3024
- pointer-events: none; }
3025
- .react-autoql-cascader .options-container .options-title {
3026
- padding: 4px;
3027
- padding-left: 10px;
3028
- font-weight: 600; }
3029
- .react-autoql-cascader .options-container .cascader-back-arrow {
3030
- position: absolute;
3031
- cursor: pointer;
3032
- top: 15px;
3033
- left: 0; }
3034
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3035
- opacity: 0.8; }
3036
- .react-autoql-cascader .options-container .option {
3037
- cursor: pointer;
3038
- padding: 4px;
3039
- display: flex;
3040
- justify-content: space-between;
3041
- border-radius: 2px;
3042
- padding-left: 10px; }
3043
- .react-autoql-cascader .options-container .option .option-arrow {
3044
- opacity: 0.7; }
3045
- .react-autoql-cascader .options-container .option .option-execute-icon {
3046
- opacity: 0;
3047
- color: #fff;
3048
- font-size: 16px;
3049
- vertical-align: middle; }
3050
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3051
- background-color: var(--react-autoql-accent-color, #26a7df);
3052
- color: #fff; }
3053
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3054
- opacity: 1; }
3055
- .react-autoql-cascader .options-container:not(:last-child) {
3056
- border-right: 1px solid #d3d3d352; }
3042
+ padding: 10px;
3043
+ resize: none;
3044
+ background: var(--react-autoql-background-color-secondary); }
3045
+ .copy-sql-modal-content .copy-sql-btn {
3046
+ color: var(--react-autoql-text-color);
3047
+ background-color: var(--react-autoql-background-color-primary);
3048
+ position: absolute;
3049
+ top: 3px;
3050
+ right: 0;
3051
+ opacity: 0;
3052
+ transition: opacity 0.3s ease; }
3053
+ .copy-sql-modal-content .sql-copied {
3054
+ color: var(--react-autoql-success-color) !important; }
3055
+ .copy-sql-modal-content:hover .copy-sql-btn {
3056
+ opacity: 1; }
3057
3057
 
3058
3058
  .query-tips-page-container {
3059
3059
  height: 100%;
@@ -3865,6 +3865,44 @@ span.react-autoql-icon {
3865
3865
 
3866
3866
 
3867
3867
 
3868
+ .react-autoql-select {
3869
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3870
+ border-radius: 4px;
3871
+ background: var(--react-autoql-background-color-primary, white);
3872
+ display: inline-block;
3873
+ font-size: 13px;
3874
+ line-height: 32px;
3875
+ height: 34px;
3876
+ margin: 0 3px;
3877
+ padding: 0 11px;
3878
+ color: var(--react-autoql-accent-color, #26a7df);
3879
+ transition: all 0.2s ease;
3880
+ cursor: pointer; }
3881
+ .react-autoql-select:hover {
3882
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3883
+
3884
+ .react-autoql-select-popup-container {
3885
+ background: var(--react-autoql-background-color-primary, white);
3886
+ padding: 10px 0;
3887
+ max-height: 300px;
3888
+ overflow-y: auto; }
3889
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
3890
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3891
+ .react-autoql-select-popup-container .react-autoql-select-popup {
3892
+ list-style-type: none;
3893
+ width: 100%;
3894
+ margin: 0;
3895
+ padding: 0; }
3896
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
3897
+ color: var(--react-autoql-text-color-primary);
3898
+ width: 100%;
3899
+ height: 35px;
3900
+ line-height: 35px;
3901
+ padding: 0 20px;
3902
+ cursor: pointer; }
3903
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3904
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3905
+
3868
3906
  .slack-modal-error-container,
3869
3907
  .slack-modal-empty-list-message {
3870
3908
  display: flex;
@@ -4010,44 +4048,6 @@ span.react-autoql-icon {
4010
4048
  .slack-channel-list-container .connect-channel-btn button {
4011
4049
  width: 200px; }
4012
4050
 
4013
- .react-autoql-select {
4014
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
4015
- border-radius: 4px;
4016
- background: var(--react-autoql-background-color-primary, white);
4017
- display: inline-block;
4018
- font-size: 13px;
4019
- line-height: 32px;
4020
- height: 34px;
4021
- margin: 0 3px;
4022
- padding: 0 11px;
4023
- color: var(--react-autoql-accent-color, #26a7df);
4024
- transition: all 0.2s ease;
4025
- cursor: pointer; }
4026
- .react-autoql-select:hover {
4027
- border-color: var(--react-autoql-accent-color, #26a7df); }
4028
-
4029
- .react-autoql-select-popup-container {
4030
- background: var(--react-autoql-background-color-primary, white);
4031
- padding: 10px 0;
4032
- max-height: 300px;
4033
- overflow-y: auto; }
4034
- .react-autoql-select-popup-container .react-autoql-select-option.active {
4035
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4036
- .react-autoql-select-popup-container .react-autoql-select-popup {
4037
- list-style-type: none;
4038
- width: 100%;
4039
- margin: 0;
4040
- padding: 0; }
4041
- .react-autoql-select-popup-container .react-autoql-select-popup li {
4042
- color: var(--react-autoql-text-color-primary);
4043
- width: 100%;
4044
- height: 35px;
4045
- line-height: 35px;
4046
- padding: 0 20px;
4047
- cursor: pointer; }
4048
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4049
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4050
-
4051
4051
  .react-autoql-select-with-arrow div {
4052
4052
  color: inherit; }
4053
4053