react-autoql 3.4.3 → 3.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -142,78 +142,6 @@
142
142
  left: 30px;
143
143
  top: 15px; }
144
144
 
145
- .chat-voice-record-button {
146
- width: 40px;
147
- height: 40px;
148
- border-radius: 24px;
149
- margin: 10px;
150
- margin-left: 0;
151
- font-size: 18px;
152
- line-height: 24px;
153
- outline: none !important;
154
- position: relative;
155
- cursor: pointer;
156
- overflow: hidden;
157
- background: var(--react-autoql-accent-color);
158
- color: white;
159
- border: none;
160
- flex-shrink: 0;
161
- flex-grow: 0; }
162
-
163
- .chat-voice-record-button:hover {
164
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
165
-
166
- .chat-voice-record-button.listening {
167
- background: #ff471a; }
168
-
169
- .chat-voice-record-icon {
170
- vertical-align: top; }
171
-
172
- .react-autoql-tooltip {
173
- font-family: inherit;
174
- letter-spacing: 0.04em;
175
- padding: 7px 15px;
176
- opacity: 1 !important;
177
- z-index: 99999 !important; }
178
-
179
- @-webkit-keyframes slide {
180
- 0% {
181
- transform: translateX(-100%); }
182
- 100% {
183
- transform: translateX(100%); } }
184
-
185
- @keyframes slide {
186
- 0% {
187
- transform: translateX(-100%); }
188
- 100% {
189
- transform: translateX(100%); } }
190
-
191
- @-webkit-keyframes move {
192
- 0% {
193
- left: 0;
194
- opacity: 0; }
195
- 5% {
196
- opacity: 0; }
197
- 48% {
198
- opacity: 0.2; }
199
- 80% {
200
- opacity: 0; }
201
- 100% {
202
- left: 82%; } }
203
-
204
- @keyframes move {
205
- 0% {
206
- left: 0;
207
- opacity: 0; }
208
- 5% {
209
- opacity: 0; }
210
- 48% {
211
- opacity: 0.2; }
212
- 80% {
213
- opacity: 0; }
214
- 100% {
215
- left: 82%; } }
216
-
217
145
  #condition-lock-snackbar-success {
218
146
  visibility: hidden;
219
147
  min-width: 200px;
@@ -807,66 +735,77 @@
807
735
  top: 30px;
808
736
  opacity: 0; } }
809
737
 
810
- .react-autoql-dashboard-container {
811
- background: var(--react-autoql-background-color-secondary);
812
- height: 100%;
813
- width: 100%;
814
- overflow: hidden; }
815
-
816
- .react-autoql-dashboard-container.edit-mode {
817
- padding-bottom: 200px; }
818
-
819
- .dashboard-drilldown-modal .ReactModal__Content {
820
- top: unset !important;
821
- margin-top: 20px !important;
822
- max-height: 93vh !important; }
738
+ .chat-voice-record-button {
739
+ width: 40px;
740
+ height: 40px;
741
+ border-radius: 24px;
742
+ margin: 10px;
743
+ margin-left: 0;
744
+ font-size: 18px;
745
+ line-height: 24px;
746
+ outline: none !important;
747
+ position: relative;
748
+ cursor: pointer;
749
+ overflow: hidden;
750
+ background: var(--react-autoql-accent-color);
751
+ color: white;
752
+ border: none;
753
+ flex-shrink: 0;
754
+ flex-grow: 0; }
823
755
 
824
- .dashboard-drilldown-modal .react-autoql-modal-body {
825
- padding: 0; }
756
+ .chat-voice-record-button:hover {
757
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
826
758
 
827
- .dashboard-drilldown-modal .react-autoql-table {
828
- opacity: 0.9;
829
- font-size: 11px; }
759
+ .chat-voice-record-button.listening {
760
+ background: #ff471a; }
830
761
 
831
- .dashboard-drilldown-modal .splitter-layout {
832
- height: calc(100% - 55px); }
762
+ .chat-voice-record-icon {
763
+ vertical-align: top; }
833
764
 
834
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
835
- padding: 20px;
836
- padding-bottom: 10px; }
765
+ .react-autoql-tooltip {
766
+ font-family: inherit;
767
+ letter-spacing: 0.04em;
768
+ padding: 7px 15px;
769
+ opacity: 1 !important;
770
+ z-index: 99999 !important; }
837
771
 
838
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
839
- text-align: right;
840
- width: 100%;
841
- padding-right: 20px; }
842
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
843
- position: absolute;
844
- bottom: 5px;
845
- width: 100px;
846
- right: 0; }
847
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
848
- padding-top: 10px;
849
- margin-bottom: -8px; }
772
+ @-webkit-keyframes slide {
773
+ 0% {
774
+ transform: translateX(-100%); }
775
+ 100% {
776
+ transform: translateX(100%); } }
850
777
 
851
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
852
- padding: 20px;
853
- padding-top: 10px;
854
- overflow: hidden;
855
- height: 100%; }
778
+ @keyframes slide {
779
+ 0% {
780
+ transform: translateX(-100%); }
781
+ 100% {
782
+ transform: translateX(100%); } }
856
783
 
857
- .empty-dashboard-message-container {
858
- font-family: var(--react-autoql-font-family);
859
- color: var(--react-autoql-text-color-primary);
860
- letter-spacing: 0.02em;
861
- text-align: center;
862
- padding: 100px;
863
- height: 100%;
864
- width: 100%; }
784
+ @-webkit-keyframes move {
785
+ 0% {
786
+ left: 0;
787
+ opacity: 0; }
788
+ 5% {
789
+ opacity: 0; }
790
+ 48% {
791
+ opacity: 0.2; }
792
+ 80% {
793
+ opacity: 0; }
794
+ 100% {
795
+ left: 82%; } }
865
796
 
866
- .empty-dashboard-new-tile-btn {
867
- color: var(--react-autoql-accent-color);
868
- font-weight: bold;
869
- cursor: pointer; }
797
+ @keyframes move {
798
+ 0% {
799
+ left: 0;
800
+ opacity: 0; }
801
+ 5% {
802
+ opacity: 0; }
803
+ 48% {
804
+ opacity: 0.2; }
805
+ 80% {
806
+ opacity: 0; }
807
+ 100% {
808
+ left: 82%; } }
870
809
 
871
810
  .loading-container-centered {
872
811
  height: 100%;
@@ -912,52 +851,6 @@
912
851
  -webkit-animation: response-loading3 0.6s infinite;
913
852
  animation: response-loading3 0.6s infinite; }
914
853
 
915
- .react-autoql-icon {
916
- position: relative;
917
- opacity: 1; }
918
- .react-autoql-icon.warning {
919
- color: var(--react-autoql-warning-color) !important; }
920
- .react-autoql-icon.danger {
921
- color: var(--react-autoql-danger-color) !important; }
922
-
923
- span.react-autoql-icon {
924
- vertical-align: unset;
925
- text-align: left;
926
- margin: 0;
927
- padding: 0;
928
- float: none !important;
929
- color: inherit; }
930
- span.react-autoql-icon svg {
931
- float: none !important;
932
- color: inherit;
933
- vertical-align: unset;
934
- text-align: left;
935
- margin: 0;
936
- padding: 0;
937
- opacity: 1;
938
- height: 1em;
939
- margin-bottom: -0.1em; }
940
-
941
- .slack-logo {
942
- display: inline-block;
943
- height: 100%;
944
- margin-bottom: 3px; }
945
- .slack-logo img {
946
- vertical-align: middle;
947
- height: 1em;
948
- width: 1em; }
949
-
950
- .react-autoql-badge {
951
- position: absolute;
952
- background: var(--react-autoql-warning-color);
953
- border: 1px solid var(--react-autoql-background-color-primary);
954
- width: 0.5em;
955
- height: 0.5em;
956
- top: -0.1em;
957
- right: -0.25em;
958
- border-radius: 50%;
959
- box-sizing: content-box; }
960
-
961
854
  .react-autoql-response-content-container:not(.html-content) {
962
855
  position: relative;
963
856
  display: flex;
@@ -1219,24 +1112,143 @@ span.react-autoql-icon {
1219
1112
  .context-menu-list li:hover {
1220
1113
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1221
1114
 
1222
- .react-autoql-dashboard .react-grid-item {
1223
- background: var(--react-autoql-background-color-primary, #fff);
1224
- color: var(--react-autoql-text-color-primary, #404040);
1225
- font-family: var(--react-autoql-font-family), sans-serif;
1226
- overflow: hidden;
1227
- border-radius: 4px;
1228
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1229
-
1230
- .react-autoql-dashboard-tile-inner-div {
1231
- height: 100%;
1232
- width: 100%;
1233
- background: inherit;
1115
+ .react-autoql-icon {
1234
1116
  position: relative;
1235
- text-align: center;
1236
- display: flex;
1237
- justify-content: flex-start;
1238
- flex-direction: column;
1239
- align-items: center; }
1117
+ opacity: 1; }
1118
+ .react-autoql-icon.warning {
1119
+ color: var(--react-autoql-warning-color) !important; }
1120
+ .react-autoql-icon.danger {
1121
+ color: var(--react-autoql-danger-color) !important; }
1122
+
1123
+ span.react-autoql-icon {
1124
+ vertical-align: unset;
1125
+ text-align: left;
1126
+ margin: 0;
1127
+ padding: 0;
1128
+ float: none !important;
1129
+ color: inherit; }
1130
+ span.react-autoql-icon svg {
1131
+ float: none !important;
1132
+ color: inherit;
1133
+ vertical-align: unset;
1134
+ text-align: left;
1135
+ margin: 0;
1136
+ padding: 0;
1137
+ opacity: 1;
1138
+ height: 1em;
1139
+ margin-bottom: -0.1em; }
1140
+
1141
+ .slack-logo {
1142
+ display: inline-block;
1143
+ height: 100%;
1144
+ margin-bottom: 3px; }
1145
+ .slack-logo img {
1146
+ vertical-align: middle;
1147
+ height: 1em;
1148
+ width: 1em; }
1149
+
1150
+ .react-autoql-badge {
1151
+ position: absolute;
1152
+ background: var(--react-autoql-warning-color);
1153
+ border: 1px solid var(--react-autoql-background-color-primary);
1154
+ width: 0.5em;
1155
+ height: 0.5em;
1156
+ top: -0.1em;
1157
+ right: -0.25em;
1158
+ border-radius: 50%;
1159
+ box-sizing: content-box; }
1160
+
1161
+ .react-autoql-dashboard-container {
1162
+ background: var(--react-autoql-background-color-secondary);
1163
+ height: 100%;
1164
+ width: 100%;
1165
+ overflow: hidden; }
1166
+
1167
+ .react-autoql-dashboard-container.edit-mode {
1168
+ padding-bottom: 200px; }
1169
+
1170
+ .dashboard-drilldown-modal .ReactModal__Content {
1171
+ top: unset !important;
1172
+ margin-top: 20px !important;
1173
+ max-height: 93vh !important; }
1174
+
1175
+ .dashboard-drilldown-modal .react-autoql-modal-body {
1176
+ padding: 0; }
1177
+
1178
+ .dashboard-drilldown-modal .react-autoql-table {
1179
+ opacity: 0.9;
1180
+ font-size: 11px; }
1181
+
1182
+ .dashboard-drilldown-modal .splitter-layout {
1183
+ height: calc(100% - 55px); }
1184
+
1185
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
+ padding: 20px;
1187
+ padding-bottom: 10px; }
1188
+
1189
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1190
+ text-align: right;
1191
+ width: 100%;
1192
+ padding-right: 20px; }
1193
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1194
+ position: absolute;
1195
+ bottom: 5px;
1196
+ width: 100px;
1197
+ right: 0; }
1198
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1199
+ padding-top: 10px;
1200
+ margin-bottom: -8px; }
1201
+
1202
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
+ padding: 20px;
1204
+ padding-top: 10px;
1205
+ overflow: hidden;
1206
+ height: 100%; }
1207
+
1208
+ .empty-dashboard-message-container {
1209
+ font-family: var(--react-autoql-font-family);
1210
+ color: var(--react-autoql-text-color-primary);
1211
+ letter-spacing: 0.02em;
1212
+ text-align: center;
1213
+ padding: 100px;
1214
+ height: 100%;
1215
+ width: 100%; }
1216
+
1217
+ .empty-dashboard-new-tile-btn {
1218
+ color: var(--react-autoql-accent-color);
1219
+ font-weight: bold;
1220
+ cursor: pointer; }
1221
+
1222
+ .notification-rule-outer-container {
1223
+ position: relative;
1224
+ border: 1px solid transparent;
1225
+ border-radius: 4px;
1226
+ padding-bottom: 5px; }
1227
+
1228
+ .expression-error-message {
1229
+ padding-left: 5px; }
1230
+
1231
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
+ border: none; }
1233
+
1234
+ .react-autoql-dashboard .react-grid-item {
1235
+ background: var(--react-autoql-background-color-primary, #fff);
1236
+ color: var(--react-autoql-text-color-primary, #404040);
1237
+ font-family: var(--react-autoql-font-family), sans-serif;
1238
+ overflow: hidden;
1239
+ border-radius: 4px;
1240
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1241
+
1242
+ .react-autoql-dashboard-tile-inner-div {
1243
+ height: 100%;
1244
+ width: 100%;
1245
+ background: inherit;
1246
+ position: relative;
1247
+ text-align: center;
1248
+ display: flex;
1249
+ justify-content: flex-start;
1250
+ flex-direction: column;
1251
+ align-items: center; }
1240
1252
 
1241
1253
  .dashboard-data-limit-warning-icon {
1242
1254
  color: var(--react-autoql-warning-color) !important;
@@ -1715,77 +1727,6 @@ span.react-autoql-icon {
1715
1727
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1716
1728
  background: inherit; }
1717
1729
 
1718
- .react-autoql-notifications-button-container {
1719
- position: relative;
1720
- display: inline-block;
1721
- font-size: inherit;
1722
- line-height: 1em;
1723
- width: 1em; }
1724
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1725
- font-size: 1em;
1726
- line-height: 0;
1727
- vertical-align: bottom; }
1728
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1729
- position: absolute;
1730
- border: 2px solid #fff;
1731
- background: #f5222d;
1732
- border-radius: 6.3em;
1733
- line-height: 1.3em;
1734
- left: 0.6em;
1735
- top: -0.8em;
1736
- padding: 0.15em 0.5em;
1737
- text-align: center;
1738
- color: white;
1739
- font-size: 0.5em; }
1740
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1741
- position: absolute;
1742
- display: inline-block;
1743
- border: 2px solid #fff;
1744
- background: #f5222d;
1745
- border-radius: 50%;
1746
- height: 0.6em;
1747
- width: 0.6em;
1748
- left: 0.5em;
1749
- top: -2px; }
1750
-
1751
- .notification-rule-outer-container {
1752
- position: relative;
1753
- border: 1px solid transparent;
1754
- border-radius: 4px;
1755
- padding-bottom: 5px; }
1756
-
1757
- .expression-error-message {
1758
- padding-left: 5px; }
1759
-
1760
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1761
- border: none; }
1762
-
1763
- .notification-modal-content .react-autoql-step-content p {
1764
- margin-bottom: 0.5em;
1765
- margin-top: 0.5em;
1766
- padding-left: 8px; }
1767
-
1768
- .notification-modal-content .step-btn-container {
1769
- text-align: right;
1770
- display: flex;
1771
- min-height: 50px; }
1772
-
1773
- .expression-valid-checkmark.react-autoql-icon svg {
1774
- color: var(--react-autoql-success-color); }
1775
-
1776
- .expression-invalid-message-container {
1777
- max-width: 75%;
1778
- float: left;
1779
- text-align: left !important;
1780
- display: flex;
1781
- flex-direction: row;
1782
- align-items: left;
1783
- justify-content: left; }
1784
-
1785
- .expression-invalid-message {
1786
- color: var(--react-autoql-danger-color);
1787
- display: 'inline-block'; }
1788
-
1789
1730
  .react-autoql-notification-settings {
1790
1731
  background-color: var(--react-autoql-background-color-secondary);
1791
1732
  color: var(--react-autoql-text-color-primary);
@@ -1879,26 +1820,157 @@ span.react-autoql-icon {
1879
1820
  align-items: center;
1880
1821
  margin-top: -25px; }
1881
1822
 
1882
- .react-autoql-notification-list-item {
1883
- display: flex;
1884
- flex-direction: column;
1885
- flex-basis: auto;
1886
- --accent-color: #26a7df;
1823
+ .react-autoql-notifications-button-container {
1887
1824
  position: relative;
1825
+ display: inline-block;
1826
+ font-size: inherit;
1827
+ line-height: 1em;
1828
+ width: 1em; }
1829
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1830
+ font-size: 1em;
1831
+ line-height: 0;
1832
+ vertical-align: bottom; }
1833
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1834
+ position: absolute;
1835
+ border: 2px solid #fff;
1836
+ background: #f5222d;
1837
+ border-radius: 6.3em;
1838
+ line-height: 1.3em;
1839
+ left: 0.6em;
1840
+ top: -0.8em;
1841
+ padding: 0.15em 0.5em;
1842
+ text-align: center;
1843
+ color: white;
1844
+ font-size: 0.5em; }
1845
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1846
+ position: absolute;
1847
+ display: inline-block;
1848
+ border: 2px solid #fff;
1849
+ background: #f5222d;
1850
+ border-radius: 50%;
1851
+ height: 0.6em;
1852
+ width: 0.6em;
1853
+ left: 0.5em;
1854
+ top: -2px; }
1855
+
1856
+ .notification-list-loading-container {
1857
+ text-align: center;
1858
+ padding-top: 100px;
1859
+ color: var(--react-autoql-text-color-primary);
1860
+ height: 100%;
1888
1861
  overflow: hidden;
1889
- background: var(--react-autoql-background-color-primary, #fff);
1890
- border-radius: 4px;
1891
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1892
- margin-bottom: 8px;
1893
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1894
- font-family: var(--react-autoql-font-family), sans-serif;
1895
- transition: all 1s ease;
1896
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1897
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1898
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1899
- -webkit-animation-fill-mode: both;
1900
- animation-fill-mode: both;
1901
- -webkit-animation-delay: 0s;
1862
+ background: var(--react-autoql-background-color-secondary); }
1863
+
1864
+ .empty-notifications-message {
1865
+ color: var(--react-autoql-text-color-primary);
1866
+ text-align: center;
1867
+ margin-top: 75px; }
1868
+ .empty-notifications-message div {
1869
+ opacity: 0.6; }
1870
+ .empty-notifications-message .empty-notifications-title {
1871
+ font-size: 16px;
1872
+ font-weight: bold;
1873
+ margin-bottom: 5px; }
1874
+ .empty-notifications-message .empty-notifications-img {
1875
+ width: 250px;
1876
+ height: 250px; }
1877
+
1878
+ .react-autoql-notification-list-container {
1879
+ height: 100%;
1880
+ padding: 20px;
1881
+ overflow-y: auto;
1882
+ background: var(--react-autoql-background-color-secondary); }
1883
+
1884
+ .react-autoql-notification-dismiss-all {
1885
+ text-align: right;
1886
+ margin-bottom: 12px;
1887
+ padding-right: 10px;
1888
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1889
+ transition: color 0.1s ease; }
1890
+ .react-autoql-notification-dismiss-all span {
1891
+ opacity: 0.8;
1892
+ cursor: pointer; }
1893
+ .react-autoql-notification-dismiss-all span:hover {
1894
+ opacity: 1; }
1895
+
1896
+ .react-autoql-notification-display-name-input {
1897
+ width: 100%; }
1898
+
1899
+ .react-autoql-notification-message-input {
1900
+ width: 100%; }
1901
+
1902
+ .react-autoql-notification-list-item:nth-of-type(0) {
1903
+ -webkit-animation-delay: 0s;
1904
+ animation-delay: 0s; }
1905
+
1906
+ .react-autoql-notification-list-item:nth-of-type(1) {
1907
+ -webkit-animation-delay: 0.1s;
1908
+ animation-delay: 0.1s; }
1909
+
1910
+ .react-autoql-notification-list-item:nth-of-type(2) {
1911
+ -webkit-animation-delay: 0.2s;
1912
+ animation-delay: 0.2s; }
1913
+
1914
+ .react-autoql-notification-list-item:nth-of-type(3) {
1915
+ -webkit-animation-delay: 0.3s;
1916
+ animation-delay: 0.3s; }
1917
+
1918
+ .react-autoql-notification-list-item:nth-of-type(4) {
1919
+ -webkit-animation-delay: 0.4s;
1920
+ animation-delay: 0.4s; }
1921
+
1922
+ .react-autoql-notification-list-item:nth-of-type(5) {
1923
+ -webkit-animation-delay: 0.5s;
1924
+ animation-delay: 0.5s; }
1925
+
1926
+ .react-autoql-notification-list-item:nth-of-type(6) {
1927
+ -webkit-animation-delay: 0.6s;
1928
+ animation-delay: 0.6s; }
1929
+
1930
+ .react-autoql-notification-list-item:nth-of-type(7) {
1931
+ -webkit-animation-delay: 0.7s;
1932
+ animation-delay: 0.7s; }
1933
+
1934
+ .react-autoql-notification-list-item:nth-of-type(8) {
1935
+ -webkit-animation-delay: 0.8s;
1936
+ animation-delay: 0.8s; }
1937
+
1938
+ .react-autoql-notification-list-item:nth-of-type(9) {
1939
+ -webkit-animation-delay: 0.9s;
1940
+ animation-delay: 0.9s; }
1941
+
1942
+ .react-autoql-notification-list-item:nth-of-type(10) {
1943
+ -webkit-animation-delay: 1s;
1944
+ animation-delay: 1s; }
1945
+
1946
+ @-webkit-keyframes slideIn {
1947
+ 0% {
1948
+ opacity: 0;
1949
+ top: 500px; }
1950
+ 100% {
1951
+ opacity: 1;
1952
+ top: 0; } }
1953
+
1954
+ .react-autoql-notification-list-item {
1955
+ display: flex;
1956
+ flex-direction: column;
1957
+ flex-basis: auto;
1958
+ --accent-color: #26a7df;
1959
+ position: relative;
1960
+ overflow: hidden;
1961
+ background: var(--react-autoql-background-color-primary, #fff);
1962
+ border-radius: 4px;
1963
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1964
+ margin-bottom: 8px;
1965
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1966
+ font-family: var(--react-autoql-font-family), sans-serif;
1967
+ transition: all 1s ease;
1968
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1969
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1970
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1971
+ -webkit-animation-fill-mode: both;
1972
+ animation-fill-mode: both;
1973
+ -webkit-animation-delay: 0s;
1902
1974
  animation-delay: 0s; }
1903
1975
  .react-autoql-notification-list-item .single-value-response {
1904
1976
  font-size: 32px;
@@ -2096,6 +2168,62 @@ span.react-autoql-icon {
2096
2168
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2097
2169
  margin-bottom: -1px; }
2098
2170
 
2171
+ .notification-rule-add-btn-outer,
2172
+ .notification-rule-validate-btn-outer {
2173
+ text-align: center;
2174
+ border-style: dashed !important;
2175
+ height: 38px;
2176
+ line-height: 25px;
2177
+ margin: 0 !important;
2178
+ overflow: hidden; }
2179
+
2180
+ .notification-rule-outer-container {
2181
+ position: relative;
2182
+ border: 1px solid transparent;
2183
+ border-radius: 4px; }
2184
+ .notification-rule-outer-container.outlined {
2185
+ border-color: rgba(0, 0, 0, 0.15);
2186
+ padding: 0 20px;
2187
+ padding-bottom: 12px; }
2188
+
2189
+ .notification-outer-all-any {
2190
+ position: absolute;
2191
+ left: 0;
2192
+ top: 50%; }
2193
+
2194
+ .notification-first-group-btn-container {
2195
+ display: flex;
2196
+ justify-content: space-between; }
2197
+
2198
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2199
+ border: none; }
2200
+
2201
+ .notification-modal-content .react-autoql-step-content p {
2202
+ margin-bottom: 0.5em;
2203
+ margin-top: 0.5em;
2204
+ padding-left: 8px; }
2205
+
2206
+ .notification-modal-content .step-btn-container {
2207
+ text-align: right;
2208
+ display: flex;
2209
+ min-height: 50px; }
2210
+
2211
+ .expression-valid-checkmark.react-autoql-icon svg {
2212
+ color: var(--react-autoql-success-color); }
2213
+
2214
+ .expression-invalid-message-container {
2215
+ max-width: 75%;
2216
+ float: left;
2217
+ text-align: left !important;
2218
+ display: flex;
2219
+ flex-direction: row;
2220
+ align-items: left;
2221
+ justify-content: left; }
2222
+
2223
+ .expression-invalid-message {
2224
+ color: var(--react-autoql-danger-color);
2225
+ display: 'inline-block'; }
2226
+
2099
2227
  .react-autoql-step-container a {
2100
2228
  color: var(--react-autoql-accent-color, #26a7df); }
2101
2229
 
@@ -2123,133 +2251,49 @@ span.react-autoql-icon {
2123
2251
  display: inline-block;
2124
2252
  width: 300px; }
2125
2253
 
2126
- .notification-list-loading-container {
2127
- text-align: center;
2128
- padding-top: 100px;
2129
- color: var(--react-autoql-text-color-primary);
2130
- height: 100%;
2131
- overflow: hidden;
2132
- background: var(--react-autoql-background-color-secondary); }
2133
-
2134
- .empty-notifications-message {
2135
- color: var(--react-autoql-text-color-primary);
2136
- text-align: center;
2137
- margin-top: 75px; }
2138
- .empty-notifications-message div {
2139
- opacity: 0.6; }
2140
- .empty-notifications-message .empty-notifications-title {
2141
- font-size: 16px;
2142
- font-weight: bold;
2143
- margin-bottom: 5px; }
2144
- .empty-notifications-message .empty-notifications-img {
2145
- width: 250px;
2146
- height: 250px; }
2147
-
2148
- .react-autoql-notification-list-container {
2149
- height: 100%;
2150
- padding: 20px;
2151
- overflow-y: auto;
2152
- background: var(--react-autoql-background-color-secondary); }
2254
+ .react-autoql-btn {
2255
+ border-radius: 4px;
2256
+ cursor: pointer;
2257
+ outline: none !important;
2258
+ transition: all 0.2s ease;
2259
+ width: auto;
2260
+ display: inline-block; }
2153
2261
 
2154
- .react-autoql-notification-dismiss-all {
2155
- text-align: right;
2156
- margin-bottom: 12px;
2157
- padding-right: 10px;
2158
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2159
- transition: color 0.1s ease; }
2160
- .react-autoql-notification-dismiss-all span {
2161
- opacity: 0.8;
2162
- cursor: pointer; }
2163
- .react-autoql-notification-dismiss-all span:hover {
2164
- opacity: 1; }
2262
+ .react-autoql-btn.disabled {
2263
+ opacity: 0.4;
2264
+ cursor: not-allowed;
2265
+ pointer-events: none; }
2165
2266
 
2166
- .react-autoql-notification-display-name-input {
2167
- width: 100%; }
2267
+ .react-autoql-btn.small {
2268
+ padding: 2px 8px;
2269
+ margin: 2px 3px; }
2168
2270
 
2169
- .react-autoql-notification-message-input {
2170
- width: 100%; }
2271
+ .react-autoql-btn.large {
2272
+ padding: 5px 16px;
2273
+ margin: 2px 5px; }
2171
2274
 
2172
- .react-autoql-notification-list-item:nth-of-type(0) {
2173
- -webkit-animation-delay: 0s;
2174
- animation-delay: 0s; }
2275
+ .react-autoql-btn.default {
2276
+ color: inherit;
2277
+ border: 1px solid var(--react-autoql-border-color);
2278
+ background: inherit; }
2279
+ .react-autoql-btn.default:hover {
2280
+ border-color: var(--react-autoql-accent-color);
2281
+ color: var(--react-autoql-accent-color); }
2175
2282
 
2176
- .react-autoql-notification-list-item:nth-of-type(1) {
2177
- -webkit-animation-delay: 0.1s;
2178
- animation-delay: 0.1s; }
2283
+ .react-autoql-btn.primary {
2284
+ background: var(--react-autoql-accent-color);
2285
+ border: 1px solid var(--react-autoql-accent-color);
2286
+ color: white; }
2287
+ .react-autoql-btn.primary:hover {
2288
+ opacity: 0.8; }
2179
2289
 
2180
- .react-autoql-notification-list-item:nth-of-type(2) {
2181
- -webkit-animation-delay: 0.2s;
2182
- animation-delay: 0.2s; }
2183
-
2184
- .react-autoql-notification-list-item:nth-of-type(3) {
2185
- -webkit-animation-delay: 0.3s;
2186
- animation-delay: 0.3s; }
2187
-
2188
- .react-autoql-notification-list-item:nth-of-type(4) {
2189
- -webkit-animation-delay: 0.4s;
2190
- animation-delay: 0.4s; }
2191
-
2192
- .react-autoql-notification-list-item:nth-of-type(5) {
2193
- -webkit-animation-delay: 0.5s;
2194
- animation-delay: 0.5s; }
2195
-
2196
- .react-autoql-notification-list-item:nth-of-type(6) {
2197
- -webkit-animation-delay: 0.6s;
2198
- animation-delay: 0.6s; }
2199
-
2200
- .react-autoql-notification-list-item:nth-of-type(7) {
2201
- -webkit-animation-delay: 0.7s;
2202
- animation-delay: 0.7s; }
2203
-
2204
- .react-autoql-notification-list-item:nth-of-type(8) {
2205
- -webkit-animation-delay: 0.8s;
2206
- animation-delay: 0.8s; }
2207
-
2208
- .react-autoql-notification-list-item:nth-of-type(9) {
2209
- -webkit-animation-delay: 0.9s;
2210
- animation-delay: 0.9s; }
2211
-
2212
- .react-autoql-notification-list-item:nth-of-type(10) {
2213
- -webkit-animation-delay: 1s;
2214
- animation-delay: 1s; }
2215
-
2216
- @-webkit-keyframes slideIn {
2217
- 0% {
2218
- opacity: 0;
2219
- top: 500px; }
2220
- 100% {
2221
- opacity: 1;
2222
- top: 0; } }
2223
-
2224
- .notification-rule-add-btn-outer,
2225
- .notification-rule-validate-btn-outer {
2226
- text-align: center;
2227
- border-style: dashed !important;
2228
- height: 38px;
2229
- line-height: 25px;
2230
- margin: 0 !important;
2231
- overflow: hidden; }
2232
-
2233
- .notification-rule-outer-container {
2234
- position: relative;
2235
- border: 1px solid transparent;
2236
- border-radius: 4px; }
2237
- .notification-rule-outer-container.outlined {
2238
- border-color: rgba(0, 0, 0, 0.15);
2239
- padding: 0 20px;
2240
- padding-bottom: 12px; }
2241
-
2242
- .notification-outer-all-any {
2243
- position: absolute;
2244
- left: 0;
2245
- top: 50%; }
2246
-
2247
- .notification-first-group-btn-container {
2248
- display: flex;
2249
- justify-content: space-between; }
2250
-
2251
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
- border: none; }
2290
+ .react-autoql-btn.danger {
2291
+ color: var(--react-autoql-danger-color, #ca0b00);
2292
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
+ background: inherit; }
2294
+ .react-autoql-btn.danger:hover {
2295
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2296
+ color: #fff; }
2253
2297
 
2254
2298
  .chat-single-message-container {
2255
2299
  transition: background-color 0.2s ease;
@@ -2473,258 +2517,6 @@ so we dont have to redraw the whole table */
2473
2517
  transform: scale(1);
2474
2518
  transform-origin: 0% 100%; } }
2475
2519
 
2476
- .react-autoql-btn {
2477
- border-radius: 4px;
2478
- cursor: pointer;
2479
- outline: none !important;
2480
- transition: all 0.2s ease;
2481
- width: auto;
2482
- display: inline-block; }
2483
-
2484
- .react-autoql-btn.disabled {
2485
- opacity: 0.4;
2486
- cursor: not-allowed;
2487
- pointer-events: none; }
2488
-
2489
- .react-autoql-btn.small {
2490
- padding: 2px 8px;
2491
- margin: 2px 3px; }
2492
-
2493
- .react-autoql-btn.large {
2494
- padding: 5px 16px;
2495
- margin: 2px 5px; }
2496
-
2497
- .react-autoql-btn.default {
2498
- color: inherit;
2499
- border: 1px solid var(--react-autoql-border-color);
2500
- background: inherit; }
2501
- .react-autoql-btn.default:hover {
2502
- border-color: var(--react-autoql-accent-color);
2503
- color: var(--react-autoql-accent-color); }
2504
-
2505
- .react-autoql-btn.primary {
2506
- background: var(--react-autoql-accent-color);
2507
- border: 1px solid var(--react-autoql-accent-color);
2508
- color: white; }
2509
- .react-autoql-btn.primary:hover {
2510
- opacity: 0.8; }
2511
-
2512
- .react-autoql-btn.danger {
2513
- color: var(--react-autoql-danger-color, #ca0b00);
2514
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2515
- background: inherit; }
2516
- .react-autoql-btn.danger:hover {
2517
- background-color: var(--react-autoql-danger-color, #ca0b00);
2518
- color: #fff; }
2519
-
2520
- .react-autoql-cascader {
2521
- position: relative;
2522
- white-space: nowrap;
2523
- overflow: hidden;
2524
- min-width: 300px; }
2525
- .react-autoql-cascader .options-container {
2526
- transition: max-width 0.3s ease;
2527
- display: inline-block;
2528
- vertical-align: top;
2529
- padding: 0 10px;
2530
- margin: 10px 0;
2531
- width: 100%;
2532
- max-width: calc(100% - 20px);
2533
- white-space: pre-wrap; }
2534
- .react-autoql-cascader .options-container.hidden {
2535
- max-width: 0; }
2536
- .react-autoql-cascader .options-container.hidden span {
2537
- white-space: nowrap; }
2538
- .react-autoql-cascader .options-container.hidden .option {
2539
- opacity: 0;
2540
- pointer-events: none; }
2541
- .react-autoql-cascader .options-container .options-title {
2542
- padding: 4px;
2543
- padding-left: 10px;
2544
- font-weight: 600; }
2545
- .react-autoql-cascader .options-container .cascader-back-arrow {
2546
- position: absolute;
2547
- cursor: pointer;
2548
- top: 15px;
2549
- left: 0; }
2550
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
- opacity: 0.8; }
2552
- .react-autoql-cascader .options-container .option {
2553
- cursor: pointer;
2554
- padding: 4px;
2555
- display: flex;
2556
- justify-content: space-between;
2557
- border-radius: 2px;
2558
- padding-left: 10px; }
2559
- .react-autoql-cascader .options-container .option .option-arrow {
2560
- opacity: 0.7; }
2561
- .react-autoql-cascader .options-container .option .option-execute-icon {
2562
- opacity: 0;
2563
- color: #fff;
2564
- font-size: 16px;
2565
- vertical-align: middle; }
2566
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
- background-color: var(--react-autoql-accent-color, #26a7df);
2568
- color: #fff; }
2569
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
- opacity: 1; }
2571
- .react-autoql-cascader .options-container:not(:last-child) {
2572
- border-right: 1px solid #d3d3d352; }
2573
-
2574
- .react-autoql-condition-locking-input {
2575
- padding: 5px;
2576
- padding-left: 20px;
2577
- margin: 10px;
2578
- height: 32px;
2579
- box-sizing: border-box;
2580
- border-radius: 24px;
2581
- font-size: 12px;
2582
- font-family: inherit;
2583
- letter-spacing: 0.04em;
2584
- outline: none !important;
2585
- width: calc(100% - 60px);
2586
- font-family: inherit;
2587
- /* Default styles outside of data messenger */
2588
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2589
- background: var(--react-autoql-background-color-primary);
2590
- color: #5d5d5d; }
2591
-
2592
- .condition-table {
2593
- min-width: 95%;
2594
- margin: 10px auto; }
2595
-
2596
- .condition-table thead {
2597
- padding-left: 10px; }
2598
-
2599
- .condition-table th {
2600
- text-align: left;
2601
- padding: 4px;
2602
- margin: 0 10px 0 10px;
2603
- font-weight: 800; }
2604
-
2605
- .react-autoql-accept-conditions-button {
2606
- text-align: right;
2607
- margin-bottom: 12px;
2608
- padding-right: 10px;
2609
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2610
- transition: color 0.1s ease; }
2611
- .react-autoql-accept-conditions-button span {
2612
- opacity: 0.8;
2613
- cursor: pointer; }
2614
- .react-autoql-accept-conditions-button span:hover {
2615
- opacity: 1; }
2616
-
2617
- .condition-table tr {
2618
- cursor: pointer; }
2619
- .condition-table tr:hover {
2620
- background: var(--react-autoql-accent-color);
2621
- color: white; }
2622
-
2623
- .condition-table td {
2624
- text-align: left;
2625
- padding: 4px;
2626
- margin: 0 10px 0 10px;
2627
- padding-left: 10px; }
2628
-
2629
- .condition-list {
2630
- padding: 0;
2631
- margin: 0 auto; }
2632
-
2633
- .condition-list-item {
2634
- cursor: pointer;
2635
- padding: 4px;
2636
- margin: 0 10px 0 10px;
2637
- display: flex;
2638
- justify-content: space-between;
2639
- border-radius: 2px;
2640
- padding-left: 10px; }
2641
- .condition-list-item:hover {
2642
- background: var(--react-autoql-accent-color);
2643
- color: white; }
2644
-
2645
- .empty-condition-list {
2646
- text-align: center;
2647
- padding: 4px;
2648
- margin: 0 20px 0 20px; }
2649
-
2650
- .autoql-close-button {
2651
- background-color: inherit;
2652
- border: none;
2653
- text-align: left;
2654
- font-size: 20px;
2655
- margin-top: -20px;
2656
- float: none !important;
2657
- color: inherit; }
2658
-
2659
- .react-tiny-popover-container {
2660
- background: var(--react-autoql-background-color-primary); }
2661
-
2662
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2663
- flex-grow: 1;
2664
- display: inline;
2665
- width: 90%;
2666
- height: 100%; }
2667
-
2668
- .autoql-condition-locking-menu-container
2669
- .react-autosuggest__suggestions-container--open {
2670
- position: absolute;
2671
- overflow-y: scroll !important;
2672
- padding-top: 5px;
2673
- padding-bottom: 5px;
2674
- display: block;
2675
- font-family: inherit;
2676
- font-size: 15px;
2677
- font-weight: normal;
2678
- z-index: 2;
2679
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2680
- text-align: left;
2681
- width: 95%;
2682
- top: 35px;
2683
- border-radius: 4px;
2684
- margin: 10px auto;
2685
- height: auto;
2686
- max-height: 50vh;
2687
- overflow-y: auto; }
2688
-
2689
- .autoql-condition-locking-menu-container
2690
- .react-autosuggest__suggestions-container--open {
2691
- background-color: var(--react-autoql-background-color-primary);
2692
- border: 1px solid var(--react-autoql-border-color);
2693
- color: var(--react-autoql-text-color-primary); }
2694
-
2695
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2696
- color: var(--react-autoql-text-color-primary); }
2697
-
2698
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2699
- opacity: 0.5; }
2700
-
2701
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2702
- opacity: 0.5; }
2703
-
2704
- .autoql-condition-locking-menu-container input::placeholder {
2705
- opacity: 0.5; }
2706
-
2707
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2708
- margin: 0;
2709
- padding: 0;
2710
- list-style-type: none; }
2711
-
2712
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2713
- cursor: pointer;
2714
- padding: 2px;
2715
- padding-left: 18px;
2716
- letter-spacing: 0.05em;
2717
- line-height: 22.5px; }
2718
-
2719
- .autoql-condition-locking-menu-container
2720
- .react-autosuggest__suggestion--highlighted {
2721
- background-color: rgba(0, 0, 0, 0.1) !important; }
2722
-
2723
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2724
- padding: 10px 0 0 10px;
2725
- font-size: 12px;
2726
- color: #777; }
2727
-
2728
2520
  .query-tips-page-container {
2729
2521
  height: 100%;
2730
2522
  padding: 10px; }
@@ -2897,85 +2689,213 @@ so we dont have to redraw the whole table */
2897
2689
  100% {
2898
2690
  opacity: 1; } }
2899
2691
 
2900
- .ReactModal__Overlay {
2901
- background-color: transparent !important;
2902
- transition: background-color 0.2s ease-in-out;
2903
- z-index: 9999; }
2692
+ .react-autoql-cascader {
2693
+ position: relative;
2694
+ white-space: nowrap;
2695
+ overflow: hidden;
2696
+ min-width: 300px; }
2697
+ .react-autoql-cascader .options-container {
2698
+ transition: max-width 0.3s ease;
2699
+ display: inline-block;
2700
+ vertical-align: top;
2701
+ padding: 0 10px;
2702
+ margin: 10px 0;
2703
+ width: 100%;
2704
+ max-width: calc(100% - 20px);
2705
+ white-space: pre-wrap; }
2706
+ .react-autoql-cascader .options-container.hidden {
2707
+ max-width: 0; }
2708
+ .react-autoql-cascader .options-container.hidden span {
2709
+ white-space: nowrap; }
2710
+ .react-autoql-cascader .options-container.hidden .option {
2711
+ opacity: 0;
2712
+ pointer-events: none; }
2713
+ .react-autoql-cascader .options-container .options-title {
2714
+ padding: 4px;
2715
+ padding-left: 10px;
2716
+ font-weight: 600; }
2717
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2718
+ position: absolute;
2719
+ cursor: pointer;
2720
+ top: 15px;
2721
+ left: 0; }
2722
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2723
+ opacity: 0.8; }
2724
+ .react-autoql-cascader .options-container .option {
2725
+ cursor: pointer;
2726
+ padding: 4px;
2727
+ display: flex;
2728
+ justify-content: space-between;
2729
+ border-radius: 2px;
2730
+ padding-left: 10px; }
2731
+ .react-autoql-cascader .options-container .option .option-arrow {
2732
+ opacity: 0.7; }
2733
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2734
+ opacity: 0;
2735
+ color: #fff;
2736
+ font-size: 16px;
2737
+ vertical-align: middle; }
2738
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2739
+ background-color: var(--react-autoql-accent-color, #26a7df);
2740
+ color: #fff; }
2741
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2742
+ opacity: 1; }
2743
+ .react-autoql-cascader .options-container:not(:last-child) {
2744
+ border-right: 1px solid #d3d3d352; }
2904
2745
 
2905
- .ReactModal__Overlay--after-open {
2906
- background-color: rgba(0, 0, 0, 0.25) !important; }
2746
+ .react-autoql-condition-locking-input {
2747
+ padding: 5px;
2748
+ padding-left: 20px;
2749
+ margin: 10px;
2750
+ height: 32px;
2751
+ box-sizing: border-box;
2752
+ border-radius: 24px;
2753
+ font-size: 12px;
2754
+ font-family: inherit;
2755
+ letter-spacing: 0.04em;
2756
+ outline: none !important;
2757
+ width: calc(100% - 60px);
2758
+ font-family: inherit;
2759
+ /* Default styles outside of data messenger */
2760
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2761
+ background: var(--react-autoql-background-color-primary);
2762
+ color: #5d5d5d; }
2763
+
2764
+ .condition-table {
2765
+ min-width: 95%;
2766
+ margin: 10px auto; }
2767
+
2768
+ .condition-table thead {
2769
+ padding-left: 10px; }
2770
+
2771
+ .condition-table th {
2772
+ text-align: left;
2773
+ padding: 4px;
2774
+ margin: 0 10px 0 10px;
2775
+ font-weight: 800; }
2776
+
2777
+ .react-autoql-accept-conditions-button {
2778
+ text-align: right;
2779
+ margin-bottom: 12px;
2780
+ padding-right: 10px;
2781
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2782
+ transition: color 0.1s ease; }
2783
+ .react-autoql-accept-conditions-button span {
2784
+ opacity: 0.8;
2785
+ cursor: pointer; }
2786
+ .react-autoql-accept-conditions-button span:hover {
2787
+ opacity: 1; }
2788
+
2789
+ .condition-table tr {
2790
+ cursor: pointer; }
2791
+ .condition-table tr:hover {
2792
+ background: var(--react-autoql-accent-color);
2793
+ color: white; }
2794
+
2795
+ .condition-table td {
2796
+ text-align: left;
2797
+ padding: 4px;
2798
+ margin: 0 10px 0 10px;
2799
+ padding-left: 10px; }
2800
+
2801
+ .condition-list {
2802
+ padding: 0;
2803
+ margin: 0 auto; }
2804
+
2805
+ .condition-list-item {
2806
+ cursor: pointer;
2807
+ padding: 4px;
2808
+ margin: 0 10px 0 10px;
2809
+ display: flex;
2810
+ justify-content: space-between;
2811
+ border-radius: 2px;
2812
+ padding-left: 10px; }
2813
+ .condition-list-item:hover {
2814
+ background: var(--react-autoql-accent-color);
2815
+ color: white; }
2816
+
2817
+ .empty-condition-list {
2818
+ text-align: center;
2819
+ padding: 4px;
2820
+ margin: 0 20px 0 20px; }
2821
+
2822
+ .autoql-close-button {
2823
+ background-color: inherit;
2824
+ border: none;
2825
+ text-align: left;
2826
+ font-size: 20px;
2827
+ margin-top: -20px;
2828
+ float: none !important;
2829
+ color: inherit; }
2830
+
2831
+ .react-tiny-popover-container {
2832
+ background: var(--react-autoql-background-color-primary); }
2833
+
2834
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2835
+ flex-grow: 1;
2836
+ display: inline;
2837
+ width: 90%;
2838
+ height: 100%; }
2839
+
2840
+ .autoql-condition-locking-menu-container
2841
+ .react-autosuggest__suggestions-container--open {
2842
+ position: absolute;
2843
+ overflow-y: scroll !important;
2844
+ padding-top: 5px;
2845
+ padding-bottom: 5px;
2846
+ display: block;
2847
+ font-family: inherit;
2848
+ font-size: 15px;
2849
+ font-weight: normal;
2850
+ z-index: 2;
2851
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2852
+ text-align: left;
2853
+ width: 95%;
2854
+ top: 35px;
2855
+ border-radius: 4px;
2856
+ margin: 10px auto;
2857
+ height: auto;
2858
+ max-height: 50vh;
2859
+ overflow-y: auto; }
2907
2860
 
2908
- .ReactModal__Overlay--before-close {
2909
- background-color: transparent !important; }
2861
+ .autoql-condition-locking-menu-container
2862
+ .react-autosuggest__suggestions-container--open {
2863
+ background-color: var(--react-autoql-background-color-primary);
2864
+ border: 1px solid var(--react-autoql-border-color);
2865
+ color: var(--react-autoql-text-color-primary); }
2910
2866
 
2911
- .ReactModal__Content {
2912
- display: flex;
2913
- flex-direction: column;
2914
- transform: scale(0);
2915
- transition: all 0.2s ease-in-out;
2916
- color: var(--react-autoql-text-color-primary);
2917
- border: 1px solid var(--react-autoql-border-color) !important;
2918
- background: var(--react-autoql-background-color-primary) !important;
2919
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2920
- padding: 0 !important;
2921
- margin: auto auto;
2922
- max-width: 90vw;
2923
- max-height: calc(100vh - 90px); }
2924
- .ReactModal__Content input.react-autoql-input,
2925
- .ReactModal__Content textarea.react-autoql-input,
2926
- .ReactModal__Content textarea {
2927
- border-color: var(--react-autoql-border-color);
2928
- color: var(--react-autoql-text-color-primary);
2929
- background: var(--react-autoql-background-color-primary, white); }
2930
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2931
- color: var(--react-autoql-text-color-placeholder); }
2932
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2933
- color: var(--react-autoql-text-color-placeholder); }
2934
- .ReactModal__Content input.react-autoql-input::placeholder,
2935
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2936
- .ReactModal__Content textarea::placeholder {
2937
- color: var(--react-autoql-text-color-placeholder); }
2867
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2868
+ color: var(--react-autoql-text-color-primary); }
2938
2869
 
2939
- .ReactModal__Overlay--after-open .ReactModal__Content {
2940
- transform: scale(1); }
2870
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2871
+ opacity: 0.5; }
2941
2872
 
2942
- .ReactModal__Overlay--before-close .ReactModal__Content {
2943
- transform: scale(0); }
2873
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2874
+ opacity: 0.5; }
2944
2875
 
2945
- .react-autoql-modal-header {
2946
- position: relative;
2947
- text-align: center;
2948
- flex: 0 0 52px;
2949
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2950
- padding: 14px 60px;
2951
- font-size: 16px; }
2876
+ .autoql-condition-locking-menu-container input::placeholder {
2877
+ opacity: 0.5; }
2952
2878
 
2953
- .react-autoql-modal-footer {
2954
- position: relative;
2955
- flex: 0 0 52px;
2956
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2957
- text-align: right;
2958
- padding: 8px 10px; }
2879
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2880
+ margin: 0;
2881
+ padding: 0;
2882
+ list-style-type: none; }
2959
2883
 
2960
- .react-autoql-modal-body {
2961
- display: flex;
2962
- flex-direction: column;
2963
- padding: 25px;
2964
- flex: 1;
2965
- overflow: hidden; }
2966
- .react-autoql-modal-body h3 {
2967
- color: var(--react-autoql-text-color-primary); }
2884
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2885
+ cursor: pointer;
2886
+ padding: 2px;
2887
+ padding-left: 18px;
2888
+ letter-spacing: 0.05em;
2889
+ line-height: 22.5px; }
2968
2890
 
2969
- .react-autoql-modal-close-btn {
2970
- position: absolute !important;
2971
- top: 10px;
2972
- right: 18px;
2973
- font-size: 22px;
2974
- opacity: 0.6 !important;
2975
- cursor: pointer; }
2891
+ .autoql-condition-locking-menu-container
2892
+ .react-autosuggest__suggestion--highlighted {
2893
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2976
2894
 
2977
- .react-autoql-modal-close-btn:hover {
2978
- opacity: 1 !important; }
2895
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2896
+ padding: 10px 0 0 10px;
2897
+ font-size: 12px;
2898
+ color: #777; }
2979
2899
 
2980
2900
  .react-autoql-table-container {
2981
2901
  height: 100%;
@@ -3146,6 +3066,86 @@ the whole table when the filter button is clicked */
3146
3066
  .comparison-value-negative {
3147
3067
  color: #e80000; }
3148
3068
 
3069
+ .ReactModal__Overlay {
3070
+ background-color: transparent !important;
3071
+ transition: background-color 0.2s ease-in-out;
3072
+ z-index: 9999; }
3073
+
3074
+ .ReactModal__Overlay--after-open {
3075
+ background-color: rgba(0, 0, 0, 0.25) !important; }
3076
+
3077
+ .ReactModal__Overlay--before-close {
3078
+ background-color: transparent !important; }
3079
+
3080
+ .ReactModal__Content {
3081
+ display: flex;
3082
+ flex-direction: column;
3083
+ transform: scale(0);
3084
+ transition: all 0.2s ease-in-out;
3085
+ color: var(--react-autoql-text-color-primary);
3086
+ border: 1px solid var(--react-autoql-border-color) !important;
3087
+ background: var(--react-autoql-background-color-primary) !important;
3088
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3089
+ padding: 0 !important;
3090
+ margin: auto auto;
3091
+ max-width: 90vw;
3092
+ max-height: calc(100vh - 90px); }
3093
+ .ReactModal__Content input.react-autoql-input,
3094
+ .ReactModal__Content textarea.react-autoql-input,
3095
+ .ReactModal__Content textarea {
3096
+ border-color: var(--react-autoql-border-color);
3097
+ color: var(--react-autoql-text-color-primary);
3098
+ background: var(--react-autoql-background-color-primary, white); }
3099
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3100
+ color: var(--react-autoql-text-color-placeholder); }
3101
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3102
+ color: var(--react-autoql-text-color-placeholder); }
3103
+ .ReactModal__Content input.react-autoql-input::placeholder,
3104
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
3105
+ .ReactModal__Content textarea::placeholder {
3106
+ color: var(--react-autoql-text-color-placeholder); }
3107
+
3108
+ .ReactModal__Overlay--after-open .ReactModal__Content {
3109
+ transform: scale(1); }
3110
+
3111
+ .ReactModal__Overlay--before-close .ReactModal__Content {
3112
+ transform: scale(0); }
3113
+
3114
+ .react-autoql-modal-header {
3115
+ position: relative;
3116
+ text-align: center;
3117
+ flex: 0 0 52px;
3118
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3119
+ padding: 14px 60px;
3120
+ font-size: 16px; }
3121
+
3122
+ .react-autoql-modal-footer {
3123
+ position: relative;
3124
+ flex: 0 0 52px;
3125
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
3126
+ text-align: right;
3127
+ padding: 8px 10px; }
3128
+
3129
+ .react-autoql-modal-body {
3130
+ display: flex;
3131
+ flex-direction: column;
3132
+ padding: 25px;
3133
+ flex: 1;
3134
+ overflow: hidden; }
3135
+ .react-autoql-modal-body h3 {
3136
+ color: var(--react-autoql-text-color-primary); }
3137
+
3138
+ .react-autoql-modal-close-btn {
3139
+ position: absolute !important;
3140
+ top: 10px;
3141
+ right: 18px;
3142
+ font-size: 22px;
3143
+ opacity: 0.6 !important;
3144
+ cursor: pointer; }
3145
+
3146
+ .react-autoql-modal-close-btn:hover {
3147
+ opacity: 1 !important; }
3148
+
3149
3149
  .autoql-options-toolbar {
3150
3150
  position: absolute;
3151
3151
  background: inherit;
@@ -3295,91 +3295,21 @@ the whole table when the filter button is clicked */
3295
3295
  width: 28px;
3296
3296
  background: none;
3297
3297
  border: none;
3298
- font-size: 16px;
3299
- line-height: 28px;
3300
- vertical-align: top;
3301
- color: var(--react-autoql-accent-color);
3302
- cursor: pointer;
3303
- outline: none !important; }
3304
-
3305
- .react-autoql-toolbar-btn.green {
3306
- color: #2ecc40; }
3307
-
3308
- .react-autoql-toolbar-btn.red {
3309
- color: #e80000; }
3310
-
3311
- .react-autoql-toolbar-btn:hover {
3312
- opacity: 0.7; }
3313
-
3314
- .react-autoql-steps-container {
3315
- margin: 10px; }
3316
-
3317
- .react-autoql-step-container {
3318
- position: relative;
3319
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3320
- margin-left: 12px;
3321
- padding-left: 20px;
3322
- padding-bottom: 5px;
3323
- transition: all 0.5s ease; }
3324
- .react-autoql-step-container.complete {
3325
- border-color: var(--react-autoql-accent-color, #26a7df); }
3326
- .react-autoql-step-container.complete .react-autoql-step-dot {
3327
- border-color: var(--react-autoql-accent-color, #26a7df);
3328
- background: var(--react-autoql-accent-color, #26a7df);
3329
- color: #fff; }
3330
- .react-autoql-step-container.error {
3331
- border-color: var(--react-autoql-warning-color); }
3332
- .react-autoql-step-container.error .react-autoql-step-dot {
3333
- border-color: var(--react-autoql-warning-color);
3334
- background: var(--react-autoql-warning-color);
3335
- color: white; }
3336
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3337
- pointer-events: none;
3338
- height: 10px;
3339
- opacity: 0;
3340
- margin: 0; }
3341
-
3342
- .react-autoql-step-dot {
3343
- position: absolute;
3344
- top: 0;
3345
- left: -10px;
3346
- height: 20px;
3347
- width: 20px;
3348
- border-radius: 15px;
3349
- background: var(--react-autoql-background-color-primary, #fff);
3350
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3351
- transition: all 0.5s ease;
3352
- font-size: 10.5px;
3353
- color: var(--react-autoql-text-color-placeholder, lightgray);
3354
- text-align: center; }
3355
-
3356
- .react-autoql-step-title-container:hover {
3357
- cursor: pointer;
3358
- transition: color 0.2s ease;
3359
- color: var(--react-autoql-accent-color, #26a7df); }
3360
-
3361
- .react-autoql-step-title {
3362
- font-weight: 500;
3363
- font-size: 15px;
3364
- line-height: 15px;
3365
- padding-top: 2px; }
3366
-
3367
- .react-autoql-step-subtitle {
3368
- font-size: 13px;
3369
- padding-top: 6px;
3370
- padding-bottom: 6px;
3371
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3298
+ font-size: 16px;
3299
+ line-height: 28px;
3300
+ vertical-align: top;
3301
+ color: var(--react-autoql-accent-color);
3302
+ cursor: pointer;
3303
+ outline: none !important; }
3372
3304
 
3373
- .react-autoql-step-content {
3374
- margin: 15px;
3375
- margin-top: 0; }
3305
+ .react-autoql-toolbar-btn.green {
3306
+ color: #2ecc40; }
3376
3307
 
3377
- .react-autoql-step-content-container {
3378
- transition-timing-function: ease;
3379
- transition-property: height, opacity, margin;
3380
- transition-duration: 0.5s;
3381
- opacity: 1; }
3308
+ .react-autoql-toolbar-btn.red {
3309
+ color: #e80000; }
3382
3310
 
3311
+ .react-autoql-toolbar-btn:hover {
3312
+ opacity: 0.7; }
3383
3313
 
3384
3314
  .content {
3385
3315
  margin: 2rem; }
@@ -3513,6 +3443,127 @@ the whole table when the filter button is clicked */
3513
3443
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3514
3444
  background: var(--react-autoql-accent-color); }
3515
3445
 
3446
+ .react-autoql-input-container {
3447
+ position: relative;
3448
+ margin: 2px 5px;
3449
+ display: inline-block; }
3450
+ .react-autoql-input-container .react-autoql-input {
3451
+ border: 1px solid rgba(0, 0, 0, 0.1);
3452
+ border-radius: 4px;
3453
+ line-height: 32px;
3454
+ min-height: 34px;
3455
+ padding: 0 10px;
3456
+ width: 100%;
3457
+ outline: none !important;
3458
+ transition: all 0.2s ease;
3459
+ transition-property: border-color, color, opacity; }
3460
+ .react-autoql-input-container .react-autoql-input.with-icon {
3461
+ padding-left: 38px; }
3462
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3463
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3464
+ color: rgba(0, 0, 0, 0.2);
3465
+ opacity: 1;
3466
+ /* Firefox */
3467
+ font-style: italic; }
3468
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3469
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3470
+ color: rgba(0, 0, 0, 0.2);
3471
+ opacity: 1;
3472
+ /* Firefox */
3473
+ font-style: italic; }
3474
+ .react-autoql-input-container .react-autoql-input::placeholder {
3475
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3476
+ color: rgba(0, 0, 0, 0.2);
3477
+ opacity: 1;
3478
+ /* Firefox */
3479
+ font-style: italic; }
3480
+ .react-autoql-input-container .react-autoql-input-icon {
3481
+ position: absolute;
3482
+ left: 12px;
3483
+ top: 8px;
3484
+ opacity: 0.4;
3485
+ transition: all 0.2s ease; }
3486
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3487
+ height: 17px;
3488
+ width: 17px; }
3489
+ .react-autoql-input-container:hover .react-autoql-input,
3490
+ .react-autoql-input-container .react-autoql-input:focus {
3491
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3492
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3493
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3494
+ opacity: 1;
3495
+ color: var(--react-autoql-accent-color, #26a7df); }
3496
+
3497
+
3498
+ .react-autoql-steps-container {
3499
+ margin: 10px; }
3500
+
3501
+ .react-autoql-step-container {
3502
+ position: relative;
3503
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3504
+ margin-left: 12px;
3505
+ padding-left: 20px;
3506
+ padding-bottom: 5px;
3507
+ transition: all 0.5s ease; }
3508
+ .react-autoql-step-container.complete {
3509
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3510
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3511
+ border-color: var(--react-autoql-accent-color, #26a7df);
3512
+ background: var(--react-autoql-accent-color, #26a7df);
3513
+ color: #fff; }
3514
+ .react-autoql-step-container.error {
3515
+ border-color: var(--react-autoql-warning-color); }
3516
+ .react-autoql-step-container.error .react-autoql-step-dot {
3517
+ border-color: var(--react-autoql-warning-color);
3518
+ background: var(--react-autoql-warning-color);
3519
+ color: white; }
3520
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3521
+ pointer-events: none;
3522
+ height: 10px;
3523
+ opacity: 0;
3524
+ margin: 0; }
3525
+
3526
+ .react-autoql-step-dot {
3527
+ position: absolute;
3528
+ top: 0;
3529
+ left: -10px;
3530
+ height: 20px;
3531
+ width: 20px;
3532
+ border-radius: 15px;
3533
+ background: var(--react-autoql-background-color-primary, #fff);
3534
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3535
+ transition: all 0.5s ease;
3536
+ font-size: 10.5px;
3537
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3538
+ text-align: center; }
3539
+
3540
+ .react-autoql-step-title-container:hover {
3541
+ cursor: pointer;
3542
+ transition: color 0.2s ease;
3543
+ color: var(--react-autoql-accent-color, #26a7df); }
3544
+
3545
+ .react-autoql-step-title {
3546
+ font-weight: 500;
3547
+ font-size: 15px;
3548
+ line-height: 15px;
3549
+ padding-top: 2px; }
3550
+
3551
+ .react-autoql-step-subtitle {
3552
+ font-size: 13px;
3553
+ padding-top: 6px;
3554
+ padding-bottom: 6px;
3555
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3556
+
3557
+ .react-autoql-step-content {
3558
+ margin: 15px;
3559
+ margin-top: 0; }
3560
+
3561
+ .react-autoql-step-content-container {
3562
+ transition-timing-function: ease;
3563
+ transition-property: height, opacity, margin;
3564
+ transition-duration: 0.5s;
3565
+ opacity: 1; }
3566
+
3516
3567
  .react-autoql-radio-btn-container {
3517
3568
  display: inline-block;
3518
3569
  border-radius: 4px; }
@@ -3584,87 +3635,6 @@ the whole table when the filter button is clicked */
3584
3635
  border-top-right-radius: 4px;
3585
3636
  border-bottom-right-radius: 4px; }
3586
3637
 
3587
- .react-autoql-input-container {
3588
- position: relative;
3589
- margin: 2px 5px;
3590
- display: inline-block; }
3591
- .react-autoql-input-container .react-autoql-input {
3592
- border: 1px solid rgba(0, 0, 0, 0.1);
3593
- border-radius: 4px;
3594
- line-height: 32px;
3595
- min-height: 34px;
3596
- padding: 0 10px;
3597
- width: 100%;
3598
- outline: none !important;
3599
- transition: all 0.2s ease;
3600
- transition-property: border-color, color, opacity; }
3601
- .react-autoql-input-container .react-autoql-input.with-icon {
3602
- padding-left: 38px; }
3603
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3604
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3605
- color: rgba(0, 0, 0, 0.2);
3606
- opacity: 1;
3607
- /* Firefox */
3608
- font-style: italic; }
3609
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3610
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3611
- color: rgba(0, 0, 0, 0.2);
3612
- opacity: 1;
3613
- /* Firefox */
3614
- font-style: italic; }
3615
- .react-autoql-input-container .react-autoql-input::placeholder {
3616
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3617
- color: rgba(0, 0, 0, 0.2);
3618
- opacity: 1;
3619
- /* Firefox */
3620
- font-style: italic; }
3621
- .react-autoql-input-container .react-autoql-input-icon {
3622
- position: absolute;
3623
- left: 12px;
3624
- top: 8px;
3625
- opacity: 0.4;
3626
- transition: all 0.2s ease; }
3627
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3628
- height: 17px;
3629
- width: 17px; }
3630
- .react-autoql-input-container:hover .react-autoql-input,
3631
- .react-autoql-input-container .react-autoql-input:focus {
3632
- border-color: var(--react-autoql-accent-color, #26a7df); }
3633
- .react-autoql-input-container:hover .react-autoql-input-icon,
3634
- .react-autoql-input-container .react-autoql-input-icon.focus {
3635
- opacity: 1;
3636
- color: var(--react-autoql-accent-color, #26a7df); }
3637
-
3638
- .spinner-loader {
3639
- display: inline-block;
3640
- width: 14px;
3641
- height: 14px;
3642
- margin-right: 6px; }
3643
-
3644
- .spinner-loader:after {
3645
- content: " ";
3646
- display: block;
3647
- width: 16px;
3648
- height: 16px;
3649
- margin: 0px;
3650
- border-radius: 50%;
3651
- border: 1px solid currentColor;
3652
- border-color: currentColor transparent currentColor transparent;
3653
- -webkit-animation: spinner-loader 1.2s linear infinite;
3654
- animation: spinner-loader 1.2s linear infinite; }
3655
-
3656
- @-webkit-keyframes spinner-loader {
3657
- 0% {
3658
- transform: rotate(0deg); }
3659
- 100% {
3660
- transform: rotate(360deg); } }
3661
-
3662
- @keyframes spinner-loader {
3663
- 0% {
3664
- transform: rotate(0deg); }
3665
- 100% {
3666
- transform: rotate(360deg); } }
3667
-
3668
3638
  .react-autoql-notification-rule-container {
3669
3639
  display: flex; }
3670
3640
  .react-autoql-notification-rule-container .react-autoql-rule-input {
@@ -3718,8 +3688,6 @@ the whole table when the filter button is clicked */
3718
3688
  padding: 0 10px;
3719
3689
  color: var(--react-autoql-warning-color); }
3720
3690
 
3721
-
3722
-
3723
3691
  .notification-read-only-group {
3724
3692
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3725
3693
  border-radius: 4px;
@@ -3838,6 +3806,36 @@ the whole table when the filter button is clicked */
3838
3806
  opacity: 1;
3839
3807
  color: var(--react-autoql-accent-color); }
3840
3808
 
3809
+ .spinner-loader {
3810
+ display: inline-block;
3811
+ width: 14px;
3812
+ height: 14px;
3813
+ margin-right: 6px; }
3814
+
3815
+ .spinner-loader:after {
3816
+ content: " ";
3817
+ display: block;
3818
+ width: 16px;
3819
+ height: 16px;
3820
+ margin: 0px;
3821
+ border-radius: 50%;
3822
+ border: 1px solid currentColor;
3823
+ border-color: currentColor transparent currentColor transparent;
3824
+ -webkit-animation: spinner-loader 1.2s linear infinite;
3825
+ animation: spinner-loader 1.2s linear infinite; }
3826
+
3827
+ @-webkit-keyframes spinner-loader {
3828
+ 0% {
3829
+ transform: rotate(0deg); }
3830
+ 100% {
3831
+ transform: rotate(360deg); } }
3832
+
3833
+ @keyframes spinner-loader {
3834
+ 0% {
3835
+ transform: rotate(0deg); }
3836
+ 100% {
3837
+ transform: rotate(360deg); } }
3838
+
3841
3839
  .react-autoql-select {
3842
3840
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3843
3841
  border-radius: 4px;
@@ -3876,6 +3874,8 @@ the whole table when the filter button is clicked */
3876
3874
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3877
3875
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3878
3876
 
3877
+
3878
+
3879
3879
  .slack-modal-error-container,
3880
3880
  .slack-modal-empty-list-message {
3881
3881
  display: flex;