react-autoql 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,4 @@
1
+
1
2
  .chat-voice-record-button {
2
3
  width: 40px;
3
4
  height: 40px;
@@ -70,6 +71,52 @@
70
71
  100% {
71
72
  left: 82%; } }
72
73
 
74
+ .react-autoql-icon {
75
+ position: relative;
76
+ opacity: 1; }
77
+ .react-autoql-icon.warning {
78
+ color: var(--react-autoql-warning-color) !important; }
79
+ .react-autoql-icon.danger {
80
+ color: var(--react-autoql-danger-color) !important; }
81
+
82
+ span.react-autoql-icon {
83
+ vertical-align: unset;
84
+ text-align: left;
85
+ margin: 0;
86
+ padding: 0;
87
+ float: none !important;
88
+ color: inherit; }
89
+ span.react-autoql-icon svg {
90
+ float: none !important;
91
+ color: inherit;
92
+ vertical-align: unset;
93
+ text-align: left;
94
+ margin: 0;
95
+ padding: 0;
96
+ opacity: 1;
97
+ height: 1em;
98
+ margin-bottom: -0.1em; }
99
+
100
+ .slack-logo {
101
+ display: inline-block;
102
+ height: 100%;
103
+ margin-bottom: 3px; }
104
+ .slack-logo img {
105
+ vertical-align: middle;
106
+ height: 1em;
107
+ width: 1em; }
108
+
109
+ .react-autoql-badge {
110
+ position: absolute;
111
+ background: var(--react-autoql-warning-color);
112
+ border: 1px solid var(--react-autoql-background-color-primary);
113
+ width: 0.5em;
114
+ height: 0.5em;
115
+ top: -0.1em;
116
+ right: -0.25em;
117
+ border-radius: 50%;
118
+ box-sizing: content-box; }
119
+
73
120
  .react-autoql-bar-container {
74
121
  position: relative;
75
122
  display: flex;
@@ -216,6 +263,50 @@
216
263
  left: 30px;
217
264
  top: 15px; }
218
265
 
266
+ .loading-container-centered {
267
+ height: 100%;
268
+ width: 100%;
269
+ display: flex;
270
+ flex-direction: column;
271
+ justify-content: center;
272
+ align-items: center; }
273
+
274
+ .response-loading {
275
+ display: inline-block;
276
+ position: relative;
277
+ width: 64px;
278
+ height: 64px; }
279
+
280
+ .response-loading div {
281
+ position: absolute;
282
+ top: 27px;
283
+ width: 11px;
284
+ height: 11px;
285
+ border-radius: 50%;
286
+ background: #e2e2e2;
287
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
288
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
289
+
290
+ .response-loading div:nth-child(1) {
291
+ left: 6px;
292
+ -webkit-animation: response-loading1 0.6s infinite;
293
+ animation: response-loading1 0.6s infinite; }
294
+
295
+ .response-loading div:nth-child(2) {
296
+ left: 6px;
297
+ -webkit-animation: response-loading2 0.6s infinite;
298
+ animation: response-loading2 0.6s infinite; }
299
+
300
+ .response-loading div:nth-child(3) {
301
+ left: 26px;
302
+ -webkit-animation: response-loading2 0.6s infinite;
303
+ animation: response-loading2 0.6s infinite; }
304
+
305
+ .response-loading div:nth-child(4) {
306
+ left: 45px;
307
+ -webkit-animation: response-loading3 0.6s infinite;
308
+ animation: response-loading3 0.6s infinite; }
309
+
219
310
  .react-autoql-dashboard-container {
220
311
  background: var(--react-autoql-background-color-secondary);
221
312
  height: 100%;
@@ -278,97 +369,6 @@
278
369
  font-weight: bold;
279
370
  cursor: pointer; }
280
371
 
281
- .loading-container-centered {
282
- height: 100%;
283
- width: 100%;
284
- display: flex;
285
- flex-direction: column;
286
- justify-content: center;
287
- align-items: center; }
288
-
289
- .response-loading {
290
- display: inline-block;
291
- position: relative;
292
- width: 64px;
293
- height: 64px; }
294
-
295
- .response-loading div {
296
- position: absolute;
297
- top: 27px;
298
- width: 11px;
299
- height: 11px;
300
- border-radius: 50%;
301
- background: #e2e2e2;
302
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
303
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
304
-
305
- .response-loading div:nth-child(1) {
306
- left: 6px;
307
- -webkit-animation: response-loading1 0.6s infinite;
308
- animation: response-loading1 0.6s infinite; }
309
-
310
- .response-loading div:nth-child(2) {
311
- left: 6px;
312
- -webkit-animation: response-loading2 0.6s infinite;
313
- animation: response-loading2 0.6s infinite; }
314
-
315
- .response-loading div:nth-child(3) {
316
- left: 26px;
317
- -webkit-animation: response-loading2 0.6s infinite;
318
- animation: response-loading2 0.6s infinite; }
319
-
320
- .response-loading div:nth-child(4) {
321
- left: 45px;
322
- -webkit-animation: response-loading3 0.6s infinite;
323
- animation: response-loading3 0.6s infinite; }
324
-
325
-
326
- .react-autoql-icon {
327
- position: relative;
328
- opacity: 1; }
329
- .react-autoql-icon.warning {
330
- color: var(--react-autoql-warning-color) !important; }
331
- .react-autoql-icon.danger {
332
- color: var(--react-autoql-danger-color) !important; }
333
-
334
- span.react-autoql-icon {
335
- vertical-align: unset;
336
- text-align: left;
337
- margin: 0;
338
- padding: 0;
339
- float: none !important;
340
- color: inherit; }
341
- span.react-autoql-icon svg {
342
- float: none !important;
343
- color: inherit;
344
- vertical-align: unset;
345
- text-align: left;
346
- margin: 0;
347
- padding: 0;
348
- opacity: 1;
349
- height: 1em;
350
- margin-bottom: -0.1em; }
351
-
352
- .slack-logo {
353
- display: inline-block;
354
- height: 100%;
355
- margin-bottom: 3px; }
356
- .slack-logo img {
357
- vertical-align: middle;
358
- height: 1em;
359
- width: 1em; }
360
-
361
- .react-autoql-badge {
362
- position: absolute;
363
- background: var(--react-autoql-warning-color);
364
- border: 1px solid var(--react-autoql-background-color-primary);
365
- width: 0.5em;
366
- height: 0.5em;
367
- top: -0.1em;
368
- right: -0.25em;
369
- border-radius: 50%;
370
- box-sizing: content-box; }
371
-
372
372
  .condition-menu-dropdown {
373
373
  display: block; }
374
374
 
@@ -1675,211 +1675,48 @@ tbody::-webkit-scrollbar-thumb {
1675
1675
  left: 0.5em;
1676
1676
  top: -2px; }
1677
1677
 
1678
- .notification-rule-add-btn-outer,
1679
- .notification-rule-validate-btn-outer {
1678
+ .notification-list-loading-container {
1680
1679
  text-align: center;
1681
- border-style: dashed !important;
1682
- height: 38px;
1683
- line-height: 25px;
1684
- margin: 0 !important;
1685
- overflow: hidden; }
1680
+ padding-top: 100px;
1681
+ color: var(--react-autoql-text-color-primary);
1682
+ height: 100%;
1683
+ overflow: hidden;
1684
+ background: var(--react-autoql-background-color-secondary); }
1686
1685
 
1687
- .notification-rule-outer-container {
1688
- position: relative;
1689
- border: 1px solid transparent;
1690
- border-radius: 4px; }
1691
- .notification-rule-outer-container.outlined {
1692
- border-color: rgba(0, 0, 0, 0.15);
1693
- padding: 0 20px;
1694
- padding-bottom: 12px; }
1686
+ .empty-notifications-message {
1687
+ color: var(--react-autoql-text-color-primary);
1688
+ text-align: center;
1689
+ margin-top: 75px; }
1690
+ .empty-notifications-message div {
1691
+ opacity: 0.6; }
1692
+ .empty-notifications-message .empty-notifications-title {
1693
+ font-size: 16px;
1694
+ font-weight: bold;
1695
+ margin-bottom: 5px; }
1696
+ .empty-notifications-message .empty-notifications-img {
1697
+ width: 250px;
1698
+ height: 250px; }
1695
1699
 
1696
- .notification-outer-all-any {
1697
- position: absolute;
1698
- left: 0;
1699
- top: 50%; }
1700
+ .react-autoql-notification-list-container {
1701
+ height: 100%;
1702
+ padding: 20px;
1703
+ overflow-y: auto;
1704
+ background: var(--react-autoql-background-color-secondary); }
1700
1705
 
1701
- .notification-first-group-btn-container {
1702
- display: flex;
1703
- justify-content: space-between; }
1706
+ .react-autoql-notification-dismiss-all {
1707
+ text-align: right;
1708
+ margin-bottom: 12px;
1709
+ padding-right: 10px;
1710
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1711
+ transition: color 0.1s ease; }
1712
+ .react-autoql-notification-dismiss-all span {
1713
+ opacity: 0.8;
1714
+ cursor: pointer; }
1715
+ .react-autoql-notification-dismiss-all span:hover {
1716
+ opacity: 1; }
1704
1717
 
1705
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1706
- border: none; }
1707
-
1708
- .react-autoql-notification-settings {
1709
- background-color: var(--react-autoql-background-color-secondary);
1710
- color: var(--react-autoql-text-color-primary);
1711
- padding-top: 20px;
1712
- height: 100%; }
1713
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1714
- margin: 20px;
1715
- margin-top: 10px;
1716
- border-radius: 4px;
1717
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1718
- background-color: var(--react-autoql-background-color-primary);
1719
- overflow: hidden; }
1720
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1721
- height: 55px;
1722
- line-height: 55px;
1723
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1724
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1725
- margin-right: 10px;
1726
- cursor: pointer; }
1727
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
1728
- margin-right: 10px; }
1729
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1730
- padding-right: 20px;
1731
- font-size: 17px;
1732
- opacity: 1;
1733
- cursor: pointer;
1734
- color: var(--react-autoql-accent-color); }
1735
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1736
- background: rgba(0, 0, 0, 0.01); }
1737
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1738
- opacity: 0;
1739
- margin-right: 20px;
1740
- font-size: 16px;
1741
- transition: all 0.2s ease;
1742
- color: var(--react-autoql-text-color-primary);
1743
- cursor: pointer; }
1744
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1745
- color: var(--react-autoql-accent-color);
1746
- opacity: 1 !important; }
1747
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1748
- opacity: 0.5; }
1749
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1750
- display: flex;
1751
- justify-content: space-between;
1752
- height: 56px;
1753
- padding-left: 25px;
1754
- padding-right: 8px;
1755
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1756
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1757
- margin-bottom: 4px;
1758
- margin-right: 8px; }
1759
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1760
- margin-bottom: 4px;
1761
- margin-right: 8px;
1762
- opacity: 0.5;
1763
- pointer-events: none; }
1764
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1765
- display: flex;
1766
- justify-content: space-between;
1767
- align-items: center;
1768
- padding: 5px 20px;
1769
- padding-bottom: 0;
1770
- color: var(--react-autoql-text-color-primary); }
1771
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1772
- display: inline-block;
1773
- height: 35px;
1774
- width: 35px;
1775
- border-radius: 20px;
1776
- background: var(--react-autoql-accent-color, #26a7df);
1777
- color: var(--react-autoql-accent-text-color);
1778
- line-height: 38px;
1779
- text-align: center;
1780
- font-size: 20px;
1781
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1782
- transition: all 0.2s ease;
1783
- margin-right: 5px;
1784
- cursor: pointer; }
1785
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1786
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1787
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1788
- white-space: nowrap;
1789
- overflow: hidden;
1790
- text-overflow: ellipsis;
1791
- padding-right: 10px; }
1792
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1793
- opacity: 0.5; }
1794
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1795
- vertical-align: middle;
1796
- height: 18px; }
1797
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1798
- display: flex;
1799
- align-items: center;
1800
- margin-top: -25px; }
1801
-
1802
- .notification-rule-outer-container {
1803
- position: relative;
1804
- border: 1px solid transparent;
1805
- border-radius: 4px;
1806
- padding-bottom: 5px; }
1807
-
1808
- .expression-error-message {
1809
- padding-left: 5px; }
1810
-
1811
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1812
- border: none; }
1813
-
1814
- .react-autoql-step-container a {
1815
- color: var(--react-autoql-accent-color, #26a7df); }
1816
-
1817
- .frequency-date-select-container {
1818
- margin-top: 10px; }
1819
-
1820
- .notification-frequency-step {
1821
- display: flex; }
1822
- .notification-frequency-step .frequency-category-select {
1823
- position: relative;
1824
- padding-top: 9px; }
1825
- .notification-frequency-step .notification-frequency-select {
1826
- margin-left: 8px; }
1827
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1828
- line-height: 33px; }
1829
- .notification-frequency-step .frequency-repeat-follow-text {
1830
- line-height: 32px;
1831
- vertical-align: top; }
1832
- .notification-frequency-step .frequency-settings-container {
1833
- flex: 0 1 400px; }
1834
-
1835
- .schedule-builder-timezone-section {
1836
- margin: 10px 5px; }
1837
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1838
- display: inline-block;
1839
- width: 300px; }
1840
-
1841
- .notification-list-loading-container {
1842
- text-align: center;
1843
- padding-top: 100px;
1844
- color: var(--react-autoql-text-color-primary);
1845
- height: 100%;
1846
- overflow: hidden;
1847
- background: var(--react-autoql-background-color-secondary); }
1848
-
1849
- .empty-notifications-message {
1850
- color: var(--react-autoql-text-color-primary);
1851
- text-align: center;
1852
- margin-top: 75px; }
1853
- .empty-notifications-message div {
1854
- opacity: 0.6; }
1855
- .empty-notifications-message .empty-notifications-title {
1856
- font-size: 16px;
1857
- font-weight: bold;
1858
- margin-bottom: 5px; }
1859
- .empty-notifications-message .empty-notifications-img {
1860
- width: 250px;
1861
- height: 250px; }
1862
-
1863
- .react-autoql-notification-list-container {
1864
- height: 100%;
1865
- padding: 20px;
1866
- overflow-y: auto;
1867
- background: var(--react-autoql-background-color-secondary); }
1868
-
1869
- .react-autoql-notification-dismiss-all {
1870
- text-align: right;
1871
- margin-bottom: 12px;
1872
- padding-right: 10px;
1873
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1874
- transition: color 0.1s ease; }
1875
- .react-autoql-notification-dismiss-all span {
1876
- opacity: 0.8;
1877
- cursor: pointer; }
1878
- .react-autoql-notification-dismiss-all span:hover {
1879
- opacity: 1; }
1880
-
1881
- .react-autoql-notification-display-name-input {
1882
- width: 100%; }
1718
+ .react-autoql-notification-display-name-input {
1719
+ width: 100%; }
1883
1720
 
1884
1721
  .react-autoql-notification-message-input {
1885
1722
  width: 100%; }
@@ -1936,32 +1773,6 @@ tbody::-webkit-scrollbar-thumb {
1936
1773
  opacity: 1;
1937
1774
  top: 0; } }
1938
1775
 
1939
- .notification-modal-content .react-autoql-step-content p {
1940
- margin-bottom: 0.5em;
1941
- margin-top: 0.5em;
1942
- padding-left: 8px; }
1943
-
1944
- .notification-modal-content .step-btn-container {
1945
- text-align: right;
1946
- display: flex;
1947
- min-height: 50px; }
1948
-
1949
- .expression-valid-checkmark.react-autoql-icon svg {
1950
- color: var(--react-autoql-success-color); }
1951
-
1952
- .expression-invalid-message-container {
1953
- max-width: 75%;
1954
- float: left;
1955
- text-align: left !important;
1956
- display: flex;
1957
- flex-direction: row;
1958
- align-items: left;
1959
- justify-content: left; }
1960
-
1961
- .expression-invalid-message {
1962
- color: var(--react-autoql-danger-color);
1963
- display: 'inline-block'; }
1964
-
1965
1776
  .react-autoql-notification-list-item {
1966
1777
  display: flex;
1967
1778
  flex-direction: column;
@@ -2178,6 +1989,195 @@ tbody::-webkit-scrollbar-thumb {
2178
1989
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2179
1990
  margin-bottom: -1px; }
2180
1991
 
1992
+ .notification-rule-add-btn-outer,
1993
+ .notification-rule-validate-btn-outer {
1994
+ text-align: center;
1995
+ border-style: dashed !important;
1996
+ height: 38px;
1997
+ line-height: 25px;
1998
+ margin: 0 !important;
1999
+ overflow: hidden; }
2000
+
2001
+ .notification-rule-outer-container {
2002
+ position: relative;
2003
+ border: 1px solid transparent;
2004
+ border-radius: 4px; }
2005
+ .notification-rule-outer-container.outlined {
2006
+ border-color: rgba(0, 0, 0, 0.15);
2007
+ padding: 0 20px;
2008
+ padding-bottom: 12px; }
2009
+
2010
+ .notification-outer-all-any {
2011
+ position: absolute;
2012
+ left: 0;
2013
+ top: 50%; }
2014
+
2015
+ .notification-first-group-btn-container {
2016
+ display: flex;
2017
+ justify-content: space-between; }
2018
+
2019
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2020
+ border: none; }
2021
+
2022
+ .notification-rule-outer-container {
2023
+ position: relative;
2024
+ border: 1px solid transparent;
2025
+ border-radius: 4px;
2026
+ padding-bottom: 5px; }
2027
+
2028
+ .expression-error-message {
2029
+ padding-left: 5px; }
2030
+
2031
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2032
+ border: none; }
2033
+
2034
+ .react-autoql-notification-settings {
2035
+ background-color: var(--react-autoql-background-color-secondary);
2036
+ color: var(--react-autoql-text-color-primary);
2037
+ padding-top: 20px;
2038
+ height: 100%; }
2039
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
2040
+ margin: 20px;
2041
+ margin-top: 10px;
2042
+ border-radius: 4px;
2043
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2044
+ background-color: var(--react-autoql-background-color-primary);
2045
+ overflow: hidden; }
2046
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
2047
+ height: 55px;
2048
+ line-height: 55px;
2049
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
2050
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
2051
+ margin-right: 10px;
2052
+ cursor: pointer; }
2053
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item #react-autoql-notification-error-status-icon-PROJECT {
2054
+ margin-right: 10px; }
2055
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
2056
+ padding-right: 20px;
2057
+ font-size: 17px;
2058
+ opacity: 1;
2059
+ cursor: pointer;
2060
+ color: var(--react-autoql-accent-color); }
2061
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
2062
+ background: rgba(0, 0, 0, 0.01); }
2063
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
2064
+ opacity: 0;
2065
+ margin-right: 20px;
2066
+ font-size: 16px;
2067
+ transition: all 0.2s ease;
2068
+ color: var(--react-autoql-text-color-primary);
2069
+ cursor: pointer; }
2070
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
2071
+ color: var(--react-autoql-accent-color);
2072
+ opacity: 1 !important; }
2073
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
2074
+ opacity: 0.5; }
2075
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
2076
+ display: flex;
2077
+ justify-content: space-between;
2078
+ height: 56px;
2079
+ padding-left: 25px;
2080
+ padding-right: 8px;
2081
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2082
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
2083
+ margin-bottom: 4px;
2084
+ margin-right: 8px; }
2085
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
2086
+ margin-bottom: 4px;
2087
+ margin-right: 8px;
2088
+ opacity: 0.5;
2089
+ pointer-events: none; }
2090
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
2091
+ display: flex;
2092
+ justify-content: space-between;
2093
+ align-items: center;
2094
+ padding: 5px 20px;
2095
+ padding-bottom: 0;
2096
+ color: var(--react-autoql-text-color-primary); }
2097
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
2098
+ display: inline-block;
2099
+ height: 35px;
2100
+ width: 35px;
2101
+ border-radius: 20px;
2102
+ background: var(--react-autoql-accent-color, #26a7df);
2103
+ color: var(--react-autoql-accent-text-color);
2104
+ line-height: 38px;
2105
+ text-align: center;
2106
+ font-size: 20px;
2107
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2108
+ transition: all 0.2s ease;
2109
+ margin-right: 5px;
2110
+ cursor: pointer; }
2111
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
2112
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
2113
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
2114
+ white-space: nowrap;
2115
+ overflow: hidden;
2116
+ text-overflow: ellipsis;
2117
+ padding-right: 10px; }
2118
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2119
+ opacity: 0.5; }
2120
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
2121
+ vertical-align: middle;
2122
+ height: 18px; }
2123
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
2124
+ display: flex;
2125
+ align-items: center;
2126
+ margin-top: -25px; }
2127
+
2128
+ .notification-modal-content .react-autoql-step-content p {
2129
+ margin-bottom: 0.5em;
2130
+ margin-top: 0.5em;
2131
+ padding-left: 8px; }
2132
+
2133
+ .notification-modal-content .step-btn-container {
2134
+ text-align: right;
2135
+ display: flex;
2136
+ min-height: 50px; }
2137
+
2138
+ .expression-valid-checkmark.react-autoql-icon svg {
2139
+ color: var(--react-autoql-success-color); }
2140
+
2141
+ .expression-invalid-message-container {
2142
+ max-width: 75%;
2143
+ float: left;
2144
+ text-align: left !important;
2145
+ display: flex;
2146
+ flex-direction: row;
2147
+ align-items: left;
2148
+ justify-content: left; }
2149
+
2150
+ .expression-invalid-message {
2151
+ color: var(--react-autoql-danger-color);
2152
+ display: 'inline-block'; }
2153
+
2154
+ .react-autoql-step-container a {
2155
+ color: var(--react-autoql-accent-color, #26a7df); }
2156
+
2157
+ .frequency-date-select-container {
2158
+ margin-top: 10px; }
2159
+
2160
+ .notification-frequency-step {
2161
+ display: flex; }
2162
+ .notification-frequency-step .frequency-category-select {
2163
+ position: relative;
2164
+ padding-top: 9px; }
2165
+ .notification-frequency-step .notification-frequency-select {
2166
+ margin-left: 8px; }
2167
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2168
+ line-height: 33px; }
2169
+ .notification-frequency-step .frequency-repeat-follow-text {
2170
+ line-height: 32px;
2171
+ vertical-align: top; }
2172
+ .notification-frequency-step .frequency-settings-container {
2173
+ flex: 0 1 400px; }
2174
+
2175
+ .schedule-builder-timezone-section {
2176
+ margin: 10px 5px; }
2177
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
2178
+ display: inline-block;
2179
+ width: 300px; }
2180
+
2181
2181
  .react-autoql-dashboard .react-autoql-dashboard-tile {
2182
2182
  background: var(--react-autoql-background-color-primary, #fff);
2183
2183
  color: var(--react-autoql-text-color-primary, #404040);
@@ -2792,6 +2792,7 @@ tbody::-webkit-scrollbar-thumb {
2792
2792
  .react-autoql-modal-close-btn:hover {
2793
2793
  opacity: 1 !important; }
2794
2794
 
2795
+
2795
2796
  .autoql-options-toolbar {
2796
2797
  position: absolute;
2797
2798
  background: inherit;
@@ -2827,6 +2828,59 @@ tbody::-webkit-scrollbar-thumb {
2827
2828
  .copy-sql-modal-content:hover .copy-sql-btn {
2828
2829
  opacity: 1; }
2829
2830
 
2831
+ .react-autoql-cascader {
2832
+ position: relative;
2833
+ white-space: nowrap;
2834
+ overflow: hidden;
2835
+ min-width: 300px; }
2836
+ .react-autoql-cascader .options-container {
2837
+ transition: max-width 0.3s ease;
2838
+ display: inline-block;
2839
+ vertical-align: top;
2840
+ padding: 0 10px;
2841
+ margin: 10px 0;
2842
+ width: 100%;
2843
+ max-width: calc(100% - 20px);
2844
+ white-space: pre-wrap; }
2845
+ .react-autoql-cascader .options-container.hidden {
2846
+ max-width: 0; }
2847
+ .react-autoql-cascader .options-container.hidden span {
2848
+ white-space: nowrap; }
2849
+ .react-autoql-cascader .options-container.hidden .option {
2850
+ opacity: 0;
2851
+ pointer-events: none; }
2852
+ .react-autoql-cascader .options-container .options-title {
2853
+ padding: 4px;
2854
+ padding-left: 10px;
2855
+ font-weight: 600; }
2856
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2857
+ position: absolute;
2858
+ cursor: pointer;
2859
+ top: 15px;
2860
+ left: 0; }
2861
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2862
+ opacity: 0.8; }
2863
+ .react-autoql-cascader .options-container .option {
2864
+ cursor: pointer;
2865
+ padding: 4px;
2866
+ display: flex;
2867
+ justify-content: space-between;
2868
+ border-radius: 2px;
2869
+ padding-left: 10px; }
2870
+ .react-autoql-cascader .options-container .option .option-arrow {
2871
+ opacity: 0.7; }
2872
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2873
+ opacity: 0;
2874
+ color: #fff;
2875
+ font-size: 16px;
2876
+ vertical-align: middle; }
2877
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2878
+ background-color: var(--react-autoql-accent-color, #26a7df);
2879
+ color: #fff; }
2880
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2881
+ opacity: 1; }
2882
+ .react-autoql-cascader .options-container:not(:last-child) {
2883
+ border-right: 1px solid #d3d3d352; }
2830
2884
 
2831
2885
  .query-tips-page-container {
2832
2886
  height: 100%;
@@ -3000,60 +3054,6 @@ tbody::-webkit-scrollbar-thumb {
3000
3054
  100% {
3001
3055
  opacity: 1; } }
3002
3056
 
3003
- .react-autoql-cascader {
3004
- position: relative;
3005
- white-space: nowrap;
3006
- overflow: hidden;
3007
- min-width: 300px; }
3008
- .react-autoql-cascader .options-container {
3009
- transition: max-width 0.3s ease;
3010
- display: inline-block;
3011
- vertical-align: top;
3012
- padding: 0 10px;
3013
- margin: 10px 0;
3014
- width: 100%;
3015
- max-width: calc(100% - 20px);
3016
- white-space: pre-wrap; }
3017
- .react-autoql-cascader .options-container.hidden {
3018
- max-width: 0; }
3019
- .react-autoql-cascader .options-container.hidden span {
3020
- white-space: nowrap; }
3021
- .react-autoql-cascader .options-container.hidden .option {
3022
- opacity: 0;
3023
- pointer-events: none; }
3024
- .react-autoql-cascader .options-container .options-title {
3025
- padding: 4px;
3026
- padding-left: 10px;
3027
- font-weight: 600; }
3028
- .react-autoql-cascader .options-container .cascader-back-arrow {
3029
- position: absolute;
3030
- cursor: pointer;
3031
- top: 15px;
3032
- left: 0; }
3033
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3034
- opacity: 0.8; }
3035
- .react-autoql-cascader .options-container .option {
3036
- cursor: pointer;
3037
- padding: 4px;
3038
- display: flex;
3039
- justify-content: space-between;
3040
- border-radius: 2px;
3041
- padding-left: 10px; }
3042
- .react-autoql-cascader .options-container .option .option-arrow {
3043
- opacity: 0.7; }
3044
- .react-autoql-cascader .options-container .option .option-execute-icon {
3045
- opacity: 0;
3046
- color: #fff;
3047
- font-size: 16px;
3048
- vertical-align: middle; }
3049
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3050
- background-color: var(--react-autoql-accent-color, #26a7df);
3051
- color: #fff; }
3052
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3053
- opacity: 1; }
3054
- .react-autoql-cascader .options-container:not(:last-child) {
3055
- border-right: 1px solid #d3d3d352; }
3056
-
3057
3057
  .chat-single-message-container {
3058
3058
  transition: background-color 0.2s ease;
3059
3059
  padding-top: 6px;
@@ -3554,10 +3554,40 @@ tbody::-webkit-scrollbar-thumb {
3554
3554
  .axis-selector-container .axis-selector-content li:hover {
3555
3555
  background: rgba(0, 0, 0, 0.05); }
3556
3556
 
3557
- .axis-selector-apply-btn {
3558
- background: var(--react-autoql-background-color-primary);
3559
- padding: 5px; }
3557
+ .axis-selector-apply-btn {
3558
+ background: var(--react-autoql-background-color-primary);
3559
+ padding: 5px; }
3560
+
3561
+ .viz-toolbar {
3562
+ position: absolute;
3563
+ background: inherit;
3564
+ padding: 5px;
3565
+ border-radius: 6px;
3566
+ line-height: 28px;
3567
+ border: 1px solid #d3d3d352; }
3568
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3569
+ display: block; }
3570
+
3571
+ .react-autoql-toolbar-btn {
3572
+ height: 28px;
3573
+ width: 28px;
3574
+ background: none;
3575
+ border: none;
3576
+ font-size: 16px;
3577
+ line-height: 28px;
3578
+ vertical-align: top;
3579
+ color: var(--react-autoql-text-color-primary);
3580
+ cursor: pointer;
3581
+ outline: none !important; }
3582
+
3583
+ .react-autoql-toolbar-btn.green {
3584
+ color: #2ecc40; }
3585
+
3586
+ .react-autoql-toolbar-btn.red {
3587
+ color: #e80000; }
3560
3588
 
3589
+ .react-autoql-toolbar-btn:hover {
3590
+ opacity: 0.7; }
3561
3591
 
3562
3592
  .react-autoql-radio-btn-container {
3563
3593
  display: inline-block;
@@ -3762,87 +3792,6 @@ tbody::-webkit-scrollbar-thumb {
3762
3792
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3763
3793
  background: var(--react-autoql-accent-color); }
3764
3794
 
3765
- .viz-toolbar {
3766
- position: absolute;
3767
- background: inherit;
3768
- padding: 5px;
3769
- border-radius: 6px;
3770
- line-height: 28px;
3771
- border: 1px solid #d3d3d352; }
3772
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3773
- display: block; }
3774
-
3775
- .react-autoql-toolbar-btn {
3776
- height: 28px;
3777
- width: 28px;
3778
- background: none;
3779
- border: none;
3780
- font-size: 16px;
3781
- line-height: 28px;
3782
- vertical-align: top;
3783
- color: var(--react-autoql-text-color-primary);
3784
- cursor: pointer;
3785
- outline: none !important; }
3786
-
3787
- .react-autoql-toolbar-btn.green {
3788
- color: #2ecc40; }
3789
-
3790
- .react-autoql-toolbar-btn.red {
3791
- color: #e80000; }
3792
-
3793
- .react-autoql-toolbar-btn:hover {
3794
- opacity: 0.7; }
3795
-
3796
- .react-autoql-input-container {
3797
- position: relative;
3798
- margin: 2px 5px;
3799
- display: inline-block; }
3800
- .react-autoql-input-container .react-autoql-input {
3801
- border: 1px solid rgba(0, 0, 0, 0.1);
3802
- border-radius: 4px;
3803
- line-height: 32px;
3804
- min-height: 34px;
3805
- padding: 0 10px;
3806
- width: 100%;
3807
- outline: none !important;
3808
- transition: all 0.2s ease;
3809
- transition-property: border-color, color, opacity; }
3810
- .react-autoql-input-container .react-autoql-input.with-icon {
3811
- padding-left: 38px; }
3812
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3813
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3814
- color: rgba(0, 0, 0, 0.2);
3815
- opacity: 1;
3816
- /* Firefox */
3817
- font-style: italic; }
3818
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3819
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3820
- color: rgba(0, 0, 0, 0.2);
3821
- opacity: 1;
3822
- /* Firefox */
3823
- font-style: italic; }
3824
- .react-autoql-input-container .react-autoql-input::placeholder {
3825
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3826
- color: rgba(0, 0, 0, 0.2);
3827
- opacity: 1;
3828
- /* Firefox */
3829
- font-style: italic; }
3830
- .react-autoql-input-container .react-autoql-input-icon {
3831
- position: absolute;
3832
- left: 12px;
3833
- top: 8px;
3834
- opacity: 0.4;
3835
- transition: all 0.2s ease; }
3836
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3837
- height: 17px;
3838
- width: 17px; }
3839
- .react-autoql-input-container:hover .react-autoql-input,
3840
- .react-autoql-input-container .react-autoql-input:focus {
3841
- border-color: var(--react-autoql-accent-color, #26a7df); }
3842
- .react-autoql-input-container:hover .react-autoql-input-icon,
3843
- .react-autoql-input-container .react-autoql-input-icon.focus {
3844
- opacity: 1;
3845
- color: var(--react-autoql-accent-color, #26a7df); }
3846
3795
 
3847
3796
  .react-autoql-steps-container {
3848
3797
  margin: 10px; }
@@ -3913,6 +3862,110 @@ tbody::-webkit-scrollbar-thumb {
3913
3862
  transition-duration: 0.5s;
3914
3863
  opacity: 1; }
3915
3864
 
3865
+ .react-autoql-input-container {
3866
+ position: relative;
3867
+ margin: 2px 5px;
3868
+ display: inline-block; }
3869
+ .react-autoql-input-container .react-autoql-input {
3870
+ border: 1px solid rgba(0, 0, 0, 0.1);
3871
+ border-radius: 4px;
3872
+ line-height: 32px;
3873
+ min-height: 34px;
3874
+ padding: 0 10px;
3875
+ width: 100%;
3876
+ outline: none !important;
3877
+ transition: all 0.2s ease;
3878
+ transition-property: border-color, color, opacity; }
3879
+ .react-autoql-input-container .react-autoql-input.with-icon {
3880
+ padding-left: 38px; }
3881
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3882
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3883
+ color: rgba(0, 0, 0, 0.2);
3884
+ opacity: 1;
3885
+ /* Firefox */
3886
+ font-style: italic; }
3887
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3888
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3889
+ color: rgba(0, 0, 0, 0.2);
3890
+ opacity: 1;
3891
+ /* Firefox */
3892
+ font-style: italic; }
3893
+ .react-autoql-input-container .react-autoql-input::placeholder {
3894
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3895
+ color: rgba(0, 0, 0, 0.2);
3896
+ opacity: 1;
3897
+ /* Firefox */
3898
+ font-style: italic; }
3899
+ .react-autoql-input-container .react-autoql-input-icon {
3900
+ position: absolute;
3901
+ left: 12px;
3902
+ top: 8px;
3903
+ opacity: 0.4;
3904
+ transition: all 0.2s ease; }
3905
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3906
+ height: 17px;
3907
+ width: 17px; }
3908
+ .react-autoql-input-container:hover .react-autoql-input,
3909
+ .react-autoql-input-container .react-autoql-input:focus {
3910
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3911
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3912
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3913
+ opacity: 1;
3914
+ color: var(--react-autoql-accent-color, #26a7df); }
3915
+
3916
+ .react-autoql-notification-rule-container {
3917
+ display: flex; }
3918
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3919
+ display: flex;
3920
+ flex-direction: column;
3921
+ flex: 1;
3922
+ width: 100%; }
3923
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3924
+ display: flex;
3925
+ flex: 1; }
3926
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3927
+ display: flex;
3928
+ padding: 2px 0;
3929
+ border-radius: 4px;
3930
+ transition: all 0.3s ease;
3931
+ flex: 1; }
3932
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3933
+ flex: 0;
3934
+ flex-basis: 33px; }
3935
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3936
+ flex: 1;
3937
+ margin-left: 4px; }
3938
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3939
+ cursor: pointer;
3940
+ opacity: 0.6;
3941
+ padding: 6px; }
3942
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3943
+ opacity: 1; }
3944
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3945
+ display: none; }
3946
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3947
+ margin: 0; }
3948
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3949
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3950
+ + .react-autoql-rule-term-type-selector {
3951
+ color: var(--react-autoql-accent-color, #26a7df);
3952
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3953
+
3954
+ .read-only-rule-term {
3955
+ display: inline-block;
3956
+ border: 1px solid rgba(0, 0, 0, 0.06);
3957
+ background: rgba(0, 0, 0, 0.02);
3958
+ padding: 3px 7px;
3959
+ line-height: 1.5em;
3960
+ margin-right: 5px;
3961
+ margin-bottom: 2px;
3962
+ margin-top: 2px;
3963
+ border-radius: 4px; }
3964
+
3965
+ .expression-term-validation-error {
3966
+ padding: 0 10px;
3967
+ color: var(--react-autoql-warning-color); }
3968
+
3916
3969
  .notification-read-only-group {
3917
3970
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3918
3971
  border-radius: 4px;
@@ -4031,60 +4084,6 @@ tbody::-webkit-scrollbar-thumb {
4031
4084
  opacity: 1;
4032
4085
  color: var(--react-autoql-accent-color); }
4033
4086
 
4034
- .react-autoql-notification-rule-container {
4035
- display: flex; }
4036
- .react-autoql-notification-rule-container .react-autoql-rule-input {
4037
- display: flex;
4038
- flex-direction: column;
4039
- flex: 1;
4040
- width: 100%; }
4041
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
4042
- display: flex;
4043
- flex: 1; }
4044
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
4045
- display: flex;
4046
- padding: 2px 0;
4047
- border-radius: 4px;
4048
- transition: all 0.3s ease;
4049
- flex: 1; }
4050
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
4051
- flex: 0;
4052
- flex-basis: 33px; }
4053
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
4054
- flex: 1;
4055
- margin-left: 4px; }
4056
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
4057
- cursor: pointer;
4058
- opacity: 0.6;
4059
- padding: 6px; }
4060
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
4061
- opacity: 1; }
4062
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
4063
- display: none; }
4064
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
4065
- margin: 0; }
4066
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
4067
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
4068
- + .react-autoql-rule-term-type-selector {
4069
- color: var(--react-autoql-accent-color, #26a7df);
4070
- border-color: var(--react-autoql-accent-color, #26a7df); }
4071
-
4072
- .read-only-rule-term {
4073
- display: inline-block;
4074
- border: 1px solid rgba(0, 0, 0, 0.06);
4075
- background: rgba(0, 0, 0, 0.02);
4076
- padding: 3px 7px;
4077
- line-height: 1.5em;
4078
- margin-right: 5px;
4079
- margin-bottom: 2px;
4080
- margin-top: 2px;
4081
- border-radius: 4px; }
4082
-
4083
- .expression-term-validation-error {
4084
- padding: 0 10px;
4085
- color: var(--react-autoql-warning-color); }
4086
-
4087
-
4088
4087
  .spinner-loader {
4089
4088
  display: inline-block;
4090
4089
  width: 14px;
@@ -4116,6 +4115,7 @@ tbody::-webkit-scrollbar-thumb {
4116
4115
  transform: rotate(360deg); } }
4117
4116
 
4118
4117
 
4118
+
4119
4119
  .slack-modal-error-container,
4120
4120
  .slack-modal-empty-list-message {
4121
4121
  display: flex;