react-autoql 3.4.5 → 3.4.9

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,191 @@
1
+ .react-autoql-bar-container {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: row; }
5
+
6
+ .react-autoql-chatbar-input {
7
+ padding: 10px;
8
+ padding-left: 20px;
9
+ margin: 10px;
10
+ height: 42px;
11
+ box-sizing: border-box;
12
+ border-radius: 24px;
13
+ font-size: 16px;
14
+ font-family: inherit;
15
+ letter-spacing: 0.04em;
16
+ outline: none !important;
17
+ width: calc(100% - 20px);
18
+ font-family: inherit;
19
+ /* Default styles outside of data messenger */
20
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
21
+ background: var(--react-autoql-background-color-primary);
22
+ color: #5d5d5d; }
23
+
24
+ .react-autoql-chatbar-input.left-padding {
25
+ padding-left: 54px; }
26
+
27
+ .react-autoql-chatbar-input:disabled {
28
+ background: rgba(0, 0, 0, 0.03); }
29
+
30
+ .react-autoql-chatbar-input:not(:disabled):hover {
31
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
32
+
33
+ .react-autoql-chatbar-input::-moz-placeholder {
34
+ /* Default color outside of data messenger */
35
+ color: #999 !important; }
36
+
37
+ .react-autoql-chatbar-input:-ms-input-placeholder {
38
+ /* Default color outside of data messenger */
39
+ color: #999 !important; }
40
+
41
+ .react-autoql-chatbar-input::placeholder {
42
+ /* Default color outside of data messenger */
43
+ color: #999 !important; }
44
+
45
+ /* autosuggest */
46
+ .react-autoql-bar-container .react-autosuggest__container,
47
+ .react-autoql-chatbar-input-container {
48
+ position: relative;
49
+ flex: 1; }
50
+
51
+ .react-autoql-bar-container .react-autosuggest__input--focused {
52
+ outline: none; }
53
+
54
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
+ display: none; }
56
+
57
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
+ display: none; }
59
+
60
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
61
+ position: absolute;
62
+ top: 45px;
63
+ bottom: unset;
64
+ margin: 10px;
65
+ padding-top: 5px;
66
+ padding-bottom: 5px;
67
+ display: block;
68
+ width: calc(100% - 20px);
69
+ height: unset;
70
+ border-radius: 24px;
71
+ font-family: inherit;
72
+ font-size: 15px;
73
+ font-weight: normal;
74
+ z-index: 2;
75
+ overflow: hidden;
76
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
77
+ /* Default styles outside of data messenger */
78
+ background-color: white;
79
+ color: #5d5d5d; }
80
+
81
+ .react-autoql-bar-container.autosuggest-top
82
+ .react-autosuggest__suggestions-container--open {
83
+ top: unset;
84
+ bottom: 45px; }
85
+
86
+ .react-autoql-bar-container.autosuggest-bottom
87
+ .react-autosuggest__suggestions-container--open {
88
+ top: 45px;
89
+ bottom: unset; }
90
+
91
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
92
+ margin: 0;
93
+ padding: 0;
94
+ list-style-type: none; }
95
+
96
+ /* Autocomplete styles */
97
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
98
+ background-color: var(--react-autoql-background-color-primary);
99
+ border: 1px solid var(--react-autoql-border-color);
100
+ color: var(--react-autoql-text-color-primary); }
101
+
102
+ .react-autoql-bar-container .react-autosuggest__suggestion {
103
+ color: var(--react-autoql-text-color-primary); }
104
+
105
+ .react-autoql-chatbar-input {
106
+ border: 1px solid var(--react-autoql-border-color);
107
+ color: var(--react-autoql-text-color-primary); }
108
+
109
+ .react-autoql-chatbar-input::-moz-placeholder {
110
+ color: var(--react-autoql-text-color-placeholder); }
111
+
112
+ .react-autoql-chatbar-input:-ms-input-placeholder {
113
+ color: var(--react-autoql-text-color-placeholder); }
114
+
115
+ .react-autoql-chatbar-input::placeholder {
116
+ color: var(--react-autoql-text-color-placeholder); }
117
+
118
+ .react-autoql-bar-container .react-autosuggest__suggestion {
119
+ cursor: pointer;
120
+ padding: 2px;
121
+ padding-left: 18px;
122
+ letter-spacing: 0.05em;
123
+ line-height: 22.5px; }
124
+
125
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
126
+ background-color: rgba(0, 0, 0, 0.1) !important; }
127
+
128
+ .react-autoql-bar-container .react-autosuggest__section-title {
129
+ padding: 10px 0 0 10px;
130
+ font-size: 12px;
131
+ color: #777; }
132
+
133
+ .input-response-loading-container {
134
+ position: absolute;
135
+ right: 23px;
136
+ top: -2px; }
137
+
138
+ .chat-bar-input-icon {
139
+ position: absolute;
140
+ color: #28a8e0;
141
+ font-size: 20px;
142
+ left: 30px;
143
+ top: 15px; }
144
+
145
+ .loading-container-centered {
146
+ height: 100%;
147
+ width: 100%;
148
+ display: flex;
149
+ flex-direction: column;
150
+ justify-content: center;
151
+ align-items: center; }
152
+
153
+ .response-loading {
154
+ display: inline-block;
155
+ position: relative;
156
+ width: 64px;
157
+ height: 64px; }
158
+
159
+ .response-loading div {
160
+ position: absolute;
161
+ top: 27px;
162
+ width: 11px;
163
+ height: 11px;
164
+ border-radius: 50%;
165
+ background: #e2e2e2;
166
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
167
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
168
+
169
+ .response-loading div:nth-child(1) {
170
+ left: 6px;
171
+ -webkit-animation: response-loading1 0.6s infinite;
172
+ animation: response-loading1 0.6s infinite; }
173
+
174
+ .response-loading div:nth-child(2) {
175
+ left: 6px;
176
+ -webkit-animation: response-loading2 0.6s infinite;
177
+ animation: response-loading2 0.6s infinite; }
178
+
179
+ .response-loading div:nth-child(3) {
180
+ left: 26px;
181
+ -webkit-animation: response-loading2 0.6s infinite;
182
+ animation: response-loading2 0.6s infinite; }
183
+
184
+ .response-loading div:nth-child(4) {
185
+ left: 45px;
186
+ -webkit-animation: response-loading3 0.6s infinite;
187
+ animation: response-loading3 0.6s infinite; }
188
+
1
189
  #condition-lock-snackbar-success {
2
190
  visibility: hidden;
3
191
  min-width: 200px;
@@ -299,6 +487,7 @@
299
487
  .react-autoql-drawer-tooltip {
300
488
  font-family: var(--react-autoql-font-family), sans-serif;
301
489
  letter-spacing: 0.04em;
490
+ line-height: 0.9em;
302
491
  padding: 7px 15px;
303
492
  transition: none;
304
493
  opacity: 1 !important;
@@ -591,50 +780,6 @@
591
780
  top: 30px;
592
781
  opacity: 0; } }
593
782
 
594
- .loading-container-centered {
595
- height: 100%;
596
- width: 100%;
597
- display: flex;
598
- flex-direction: column;
599
- justify-content: center;
600
- align-items: center; }
601
-
602
- .response-loading {
603
- display: inline-block;
604
- position: relative;
605
- width: 64px;
606
- height: 64px; }
607
-
608
- .response-loading div {
609
- position: absolute;
610
- top: 27px;
611
- width: 11px;
612
- height: 11px;
613
- border-radius: 50%;
614
- background: #e2e2e2;
615
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
616
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
617
-
618
- .response-loading div:nth-child(1) {
619
- left: 6px;
620
- -webkit-animation: response-loading1 0.6s infinite;
621
- animation: response-loading1 0.6s infinite; }
622
-
623
- .response-loading div:nth-child(2) {
624
- left: 6px;
625
- -webkit-animation: response-loading2 0.6s infinite;
626
- animation: response-loading2 0.6s infinite; }
627
-
628
- .response-loading div:nth-child(3) {
629
- left: 26px;
630
- -webkit-animation: response-loading2 0.6s infinite;
631
- animation: response-loading2 0.6s infinite; }
632
-
633
- .response-loading div:nth-child(4) {
634
- left: 45px;
635
- -webkit-animation: response-loading3 0.6s infinite;
636
- animation: response-loading3 0.6s infinite; }
637
-
638
783
  .react-autoql-dashboard-container {
639
784
  background: var(--react-autoql-background-color-secondary);
640
785
  height: 100%;
@@ -768,149 +913,51 @@
768
913
  100% {
769
914
  left: 82%; } }
770
915
 
771
- .react-autoql-bar-container {
916
+ .react-autoql-icon {
772
917
  position: relative;
773
- display: flex;
774
- flex-direction: row; }
918
+ opacity: 1; }
919
+ .react-autoql-icon.warning {
920
+ color: var(--react-autoql-warning-color) !important; }
921
+ .react-autoql-icon.danger {
922
+ color: var(--react-autoql-danger-color) !important; }
775
923
 
776
- .react-autoql-chatbar-input {
777
- padding: 10px;
778
- padding-left: 20px;
779
- margin: 10px;
780
- height: 42px;
781
- box-sizing: border-box;
782
- border-radius: 24px;
783
- font-size: 16px;
784
- font-family: inherit;
785
- letter-spacing: 0.04em;
786
- outline: none !important;
787
- width: calc(100% - 20px);
788
- font-family: inherit;
789
- /* Default styles outside of data messenger */
790
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
791
- background: var(--react-autoql-background-color-primary);
792
- color: #5d5d5d; }
793
-
794
- .react-autoql-chatbar-input.left-padding {
795
- padding-left: 54px; }
796
-
797
- .react-autoql-chatbar-input:disabled {
798
- background: rgba(0, 0, 0, 0.03); }
799
-
800
- .react-autoql-chatbar-input:not(:disabled):hover {
801
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
802
-
803
- .react-autoql-chatbar-input::-moz-placeholder {
804
- /* Default color outside of data messenger */
805
- color: #999 !important; }
806
-
807
- .react-autoql-chatbar-input:-ms-input-placeholder {
808
- /* Default color outside of data messenger */
809
- color: #999 !important; }
810
-
811
- .react-autoql-chatbar-input::placeholder {
812
- /* Default color outside of data messenger */
813
- color: #999 !important; }
814
-
815
- /* autosuggest */
816
- .react-autoql-bar-container .react-autosuggest__container,
817
- .react-autoql-chatbar-input-container {
818
- position: relative;
819
- flex: 1; }
820
-
821
- .react-autoql-bar-container .react-autosuggest__input--focused {
822
- outline: none; }
823
-
824
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
825
- display: none; }
826
-
827
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
828
- display: none; }
829
-
830
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
831
- position: absolute;
832
- top: 45px;
833
- bottom: unset;
834
- margin: 10px;
835
- padding-top: 5px;
836
- padding-bottom: 5px;
837
- display: block;
838
- width: calc(100% - 20px);
839
- height: unset;
840
- border-radius: 24px;
841
- font-family: inherit;
842
- font-size: 15px;
843
- font-weight: normal;
844
- z-index: 2;
845
- overflow: hidden;
846
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
847
- /* Default styles outside of data messenger */
848
- background-color: white;
849
- color: #5d5d5d; }
850
-
851
- .react-autoql-bar-container.autosuggest-top
852
- .react-autosuggest__suggestions-container--open {
853
- top: unset;
854
- bottom: 45px; }
855
-
856
- .react-autoql-bar-container.autosuggest-bottom
857
- .react-autosuggest__suggestions-container--open {
858
- top: 45px;
859
- bottom: unset; }
860
-
861
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
924
+ span.react-autoql-icon {
925
+ vertical-align: unset;
926
+ text-align: left;
862
927
  margin: 0;
863
928
  padding: 0;
864
- list-style-type: none; }
865
-
866
- /* Autocomplete styles */
867
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
868
- background-color: var(--react-autoql-background-color-primary);
869
- border: 1px solid var(--react-autoql-border-color);
870
- color: var(--react-autoql-text-color-primary); }
871
-
872
- .react-autoql-bar-container .react-autosuggest__suggestion {
873
- color: var(--react-autoql-text-color-primary); }
874
-
875
- .react-autoql-chatbar-input {
876
- border: 1px solid var(--react-autoql-border-color);
877
- color: var(--react-autoql-text-color-primary); }
878
-
879
- .react-autoql-chatbar-input::-moz-placeholder {
880
- color: var(--react-autoql-text-color-placeholder); }
881
-
882
- .react-autoql-chatbar-input:-ms-input-placeholder {
883
- color: var(--react-autoql-text-color-placeholder); }
884
-
885
- .react-autoql-chatbar-input::placeholder {
886
- color: var(--react-autoql-text-color-placeholder); }
887
-
888
- .react-autoql-bar-container .react-autosuggest__suggestion {
889
- cursor: pointer;
890
- padding: 2px;
891
- padding-left: 18px;
892
- letter-spacing: 0.05em;
893
- line-height: 22.5px; }
894
-
895
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
896
- background-color: rgba(0, 0, 0, 0.1) !important; }
897
-
898
- .react-autoql-bar-container .react-autosuggest__section-title {
899
- padding: 10px 0 0 10px;
900
- font-size: 12px;
901
- color: #777; }
929
+ float: none !important;
930
+ color: inherit; }
931
+ span.react-autoql-icon svg {
932
+ float: none !important;
933
+ color: inherit;
934
+ vertical-align: unset;
935
+ text-align: left;
936
+ margin: 0;
937
+ padding: 0;
938
+ opacity: 1;
939
+ height: 1em;
940
+ margin-bottom: -0.1em; }
902
941
 
903
- .input-response-loading-container {
904
- position: absolute;
905
- right: 23px;
906
- top: -2px; }
942
+ .slack-logo {
943
+ display: inline-block;
944
+ height: 100%;
945
+ margin-bottom: 3px; }
946
+ .slack-logo img {
947
+ vertical-align: middle;
948
+ height: 1em;
949
+ width: 1em; }
907
950
 
908
- .chat-bar-input-icon {
951
+ .react-autoql-badge {
909
952
  position: absolute;
910
- color: #28a8e0;
911
- font-size: 20px;
912
- left: 30px;
913
- top: 15px; }
953
+ background: var(--react-autoql-warning-color);
954
+ border: 1px solid var(--react-autoql-background-color-primary);
955
+ width: 0.5em;
956
+ height: 0.5em;
957
+ top: -0.1em;
958
+ right: -0.25em;
959
+ border-radius: 50%;
960
+ box-sizing: content-box; }
914
961
 
915
962
  .react-autoql-response-content-container:not(.html-content) {
916
963
  position: relative;
@@ -1173,81 +1220,130 @@
1173
1220
  .context-menu-list li:hover {
1174
1221
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1175
1222
 
1176
- .react-autoql-icon {
1177
- position: relative;
1178
- opacity: 1; }
1179
- .react-autoql-icon.warning {
1180
- color: var(--react-autoql-warning-color) !important; }
1181
- .react-autoql-icon.danger {
1182
- color: var(--react-autoql-danger-color) !important; }
1223
+ .react-autoql-step-container a {
1224
+ color: var(--react-autoql-accent-color, #26a7df); }
1183
1225
 
1184
- span.react-autoql-icon {
1185
- vertical-align: unset;
1186
- text-align: left;
1187
- margin: 0;
1188
- padding: 0;
1189
- float: none !important;
1190
- color: inherit; }
1191
- span.react-autoql-icon svg {
1192
- float: none !important;
1193
- color: inherit;
1194
- vertical-align: unset;
1195
- text-align: left;
1196
- margin: 0;
1197
- padding: 0;
1198
- opacity: 1;
1199
- height: 1em;
1200
- margin-bottom: -0.1em; }
1226
+ .frequency-date-select-container {
1227
+ margin-top: 10px; }
1201
1228
 
1202
- .slack-logo {
1203
- display: inline-block;
1204
- height: 100%;
1205
- margin-bottom: 3px; }
1206
- .slack-logo img {
1207
- vertical-align: middle;
1208
- height: 1em;
1209
- width: 1em; }
1229
+ .notification-frequency-step {
1230
+ display: flex; }
1231
+ .notification-frequency-step .frequency-category-select {
1232
+ position: relative;
1233
+ padding-top: 9px; }
1234
+ .notification-frequency-step .notification-frequency-select {
1235
+ margin-left: 8px; }
1236
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1237
+ line-height: 33px; }
1238
+ .notification-frequency-step .frequency-repeat-follow-text {
1239
+ line-height: 32px;
1240
+ vertical-align: top; }
1241
+ .notification-frequency-step .frequency-settings-container {
1242
+ flex: 0 1 400px; }
1210
1243
 
1211
- .react-autoql-badge {
1212
- position: absolute;
1213
- background: var(--react-autoql-warning-color);
1214
- border: 1px solid var(--react-autoql-background-color-primary);
1215
- width: 0.5em;
1216
- height: 0.5em;
1217
- top: -0.1em;
1218
- right: -0.25em;
1219
- border-radius: 50%;
1220
- box-sizing: content-box; }
1244
+ .schedule-builder-timezone-section {
1245
+ margin: 10px 5px; }
1246
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1247
+ display: inline-block;
1248
+ width: 300px; }
1221
1249
 
1222
- .notification-rule-add-btn-outer,
1223
- .notification-rule-validate-btn-outer {
1250
+ .notification-list-loading-container {
1224
1251
  text-align: center;
1225
- border-style: dashed !important;
1226
- height: 38px;
1227
- line-height: 25px;
1228
- margin: 0 !important;
1229
- overflow: hidden; }
1230
-
1231
- .notification-rule-outer-container {
1232
- position: relative;
1233
- border: 1px solid transparent;
1234
- border-radius: 4px; }
1235
- .notification-rule-outer-container.outlined {
1236
- border-color: rgba(0, 0, 0, 0.15);
1237
- padding: 0 20px;
1238
- padding-bottom: 12px; }
1252
+ padding-top: 100px;
1253
+ color: var(--react-autoql-text-color-primary);
1254
+ height: 100%;
1255
+ overflow: hidden;
1256
+ background: var(--react-autoql-background-color-secondary); }
1239
1257
 
1240
- .notification-outer-all-any {
1241
- position: absolute;
1242
- left: 0;
1243
- top: 50%; }
1258
+ .empty-notifications-message {
1259
+ color: var(--react-autoql-text-color-primary);
1260
+ text-align: center;
1261
+ margin-top: 75px; }
1262
+ .empty-notifications-message div {
1263
+ opacity: 0.6; }
1264
+ .empty-notifications-message .empty-notifications-title {
1265
+ font-size: 16px;
1266
+ font-weight: bold;
1267
+ margin-bottom: 5px; }
1268
+ .empty-notifications-message .empty-notifications-img {
1269
+ width: 250px;
1270
+ height: 250px; }
1244
1271
 
1245
- .notification-first-group-btn-container {
1246
- display: flex;
1247
- justify-content: space-between; }
1272
+ .react-autoql-notification-list-container {
1273
+ height: 100%;
1274
+ padding: 20px;
1275
+ overflow-y: auto;
1276
+ background: var(--react-autoql-background-color-secondary); }
1248
1277
 
1249
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1250
- border: none; }
1278
+ .react-autoql-notification-dismiss-all {
1279
+ text-align: right;
1280
+ margin-bottom: 12px;
1281
+ padding-right: 10px;
1282
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1283
+ transition: color 0.1s ease; }
1284
+ .react-autoql-notification-dismiss-all span {
1285
+ opacity: 0.8;
1286
+ cursor: pointer; }
1287
+ .react-autoql-notification-dismiss-all span:hover {
1288
+ opacity: 1; }
1289
+
1290
+ .react-autoql-notification-display-name-input {
1291
+ width: 100%; }
1292
+
1293
+ .react-autoql-notification-message-input {
1294
+ width: 100%; }
1295
+
1296
+ .react-autoql-notification-list-item:nth-of-type(0) {
1297
+ -webkit-animation-delay: 0s;
1298
+ animation-delay: 0s; }
1299
+
1300
+ .react-autoql-notification-list-item:nth-of-type(1) {
1301
+ -webkit-animation-delay: 0.1s;
1302
+ animation-delay: 0.1s; }
1303
+
1304
+ .react-autoql-notification-list-item:nth-of-type(2) {
1305
+ -webkit-animation-delay: 0.2s;
1306
+ animation-delay: 0.2s; }
1307
+
1308
+ .react-autoql-notification-list-item:nth-of-type(3) {
1309
+ -webkit-animation-delay: 0.3s;
1310
+ animation-delay: 0.3s; }
1311
+
1312
+ .react-autoql-notification-list-item:nth-of-type(4) {
1313
+ -webkit-animation-delay: 0.4s;
1314
+ animation-delay: 0.4s; }
1315
+
1316
+ .react-autoql-notification-list-item:nth-of-type(5) {
1317
+ -webkit-animation-delay: 0.5s;
1318
+ animation-delay: 0.5s; }
1319
+
1320
+ .react-autoql-notification-list-item:nth-of-type(6) {
1321
+ -webkit-animation-delay: 0.6s;
1322
+ animation-delay: 0.6s; }
1323
+
1324
+ .react-autoql-notification-list-item:nth-of-type(7) {
1325
+ -webkit-animation-delay: 0.7s;
1326
+ animation-delay: 0.7s; }
1327
+
1328
+ .react-autoql-notification-list-item:nth-of-type(8) {
1329
+ -webkit-animation-delay: 0.8s;
1330
+ animation-delay: 0.8s; }
1331
+
1332
+ .react-autoql-notification-list-item:nth-of-type(9) {
1333
+ -webkit-animation-delay: 0.9s;
1334
+ animation-delay: 0.9s; }
1335
+
1336
+ .react-autoql-notification-list-item:nth-of-type(10) {
1337
+ -webkit-animation-delay: 1s;
1338
+ animation-delay: 1s; }
1339
+
1340
+ @-webkit-keyframes slideIn {
1341
+ 0% {
1342
+ opacity: 0;
1343
+ top: 500px; }
1344
+ 100% {
1345
+ opacity: 1;
1346
+ top: 0; } }
1251
1347
 
1252
1348
  .react-autoql-notification-list-item {
1253
1349
  display: flex;
@@ -1466,103 +1562,35 @@ span.react-autoql-icon {
1466
1562
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1467
1563
  margin-bottom: -1px; }
1468
1564
 
1469
- .notification-list-loading-container {
1470
- text-align: center;
1471
- padding-top: 100px;
1472
- color: var(--react-autoql-text-color-primary);
1473
- height: 100%;
1474
- overflow: hidden;
1475
- background: var(--react-autoql-background-color-secondary); }
1476
-
1477
- .empty-notifications-message {
1478
- color: var(--react-autoql-text-color-primary);
1565
+ .notification-rule-add-btn-outer,
1566
+ .notification-rule-validate-btn-outer {
1479
1567
  text-align: center;
1480
- margin-top: 75px; }
1481
- .empty-notifications-message div {
1482
- opacity: 0.6; }
1483
- .empty-notifications-message .empty-notifications-title {
1484
- font-size: 16px;
1485
- font-weight: bold;
1486
- margin-bottom: 5px; }
1487
- .empty-notifications-message .empty-notifications-img {
1488
- width: 250px;
1489
- height: 250px; }
1490
-
1491
- .react-autoql-notification-list-container {
1492
- height: 100%;
1493
- padding: 20px;
1494
- overflow-y: auto;
1495
- background: var(--react-autoql-background-color-secondary); }
1496
-
1497
- .react-autoql-notification-dismiss-all {
1498
- text-align: right;
1499
- margin-bottom: 12px;
1500
- padding-right: 10px;
1501
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1502
- transition: color 0.1s ease; }
1503
- .react-autoql-notification-dismiss-all span {
1504
- opacity: 0.8;
1505
- cursor: pointer; }
1506
- .react-autoql-notification-dismiss-all span:hover {
1507
- opacity: 1; }
1508
-
1509
- .react-autoql-notification-display-name-input {
1510
- width: 100%; }
1511
-
1512
- .react-autoql-notification-message-input {
1513
- width: 100%; }
1514
-
1515
- .react-autoql-notification-list-item:nth-of-type(0) {
1516
- -webkit-animation-delay: 0s;
1517
- animation-delay: 0s; }
1518
-
1519
- .react-autoql-notification-list-item:nth-of-type(1) {
1520
- -webkit-animation-delay: 0.1s;
1521
- animation-delay: 0.1s; }
1522
-
1523
- .react-autoql-notification-list-item:nth-of-type(2) {
1524
- -webkit-animation-delay: 0.2s;
1525
- animation-delay: 0.2s; }
1526
-
1527
- .react-autoql-notification-list-item:nth-of-type(3) {
1528
- -webkit-animation-delay: 0.3s;
1529
- animation-delay: 0.3s; }
1530
-
1531
- .react-autoql-notification-list-item:nth-of-type(4) {
1532
- -webkit-animation-delay: 0.4s;
1533
- animation-delay: 0.4s; }
1534
-
1535
- .react-autoql-notification-list-item:nth-of-type(5) {
1536
- -webkit-animation-delay: 0.5s;
1537
- animation-delay: 0.5s; }
1538
-
1539
- .react-autoql-notification-list-item:nth-of-type(6) {
1540
- -webkit-animation-delay: 0.6s;
1541
- animation-delay: 0.6s; }
1542
-
1543
- .react-autoql-notification-list-item:nth-of-type(7) {
1544
- -webkit-animation-delay: 0.7s;
1545
- animation-delay: 0.7s; }
1568
+ border-style: dashed !important;
1569
+ height: 38px;
1570
+ line-height: 25px;
1571
+ margin: 0 !important;
1572
+ overflow: hidden; }
1546
1573
 
1547
- .react-autoql-notification-list-item:nth-of-type(8) {
1548
- -webkit-animation-delay: 0.8s;
1549
- animation-delay: 0.8s; }
1574
+ .notification-rule-outer-container {
1575
+ position: relative;
1576
+ border: 1px solid transparent;
1577
+ border-radius: 4px; }
1578
+ .notification-rule-outer-container.outlined {
1579
+ border-color: rgba(0, 0, 0, 0.15);
1580
+ padding: 0 20px;
1581
+ padding-bottom: 12px; }
1550
1582
 
1551
- .react-autoql-notification-list-item:nth-of-type(9) {
1552
- -webkit-animation-delay: 0.9s;
1553
- animation-delay: 0.9s; }
1583
+ .notification-outer-all-any {
1584
+ position: absolute;
1585
+ left: 0;
1586
+ top: 50%; }
1554
1587
 
1555
- .react-autoql-notification-list-item:nth-of-type(10) {
1556
- -webkit-animation-delay: 1s;
1557
- animation-delay: 1s; }
1588
+ .notification-first-group-btn-container {
1589
+ display: flex;
1590
+ justify-content: space-between; }
1558
1591
 
1559
- @-webkit-keyframes slideIn {
1560
- 0% {
1561
- opacity: 0;
1562
- top: 500px; }
1563
- 100% {
1564
- opacity: 1;
1565
- top: 0; } }
1592
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1593
+ border: none; }
1566
1594
 
1567
1595
  .notification-modal-content .react-autoql-step-content p {
1568
1596
  margin-bottom: 0.5em;
@@ -1590,69 +1618,206 @@ span.react-autoql-icon {
1590
1618
  color: var(--react-autoql-danger-color);
1591
1619
  display: 'inline-block'; }
1592
1620
 
1593
- .react-autoql-dashboard .react-grid-item {
1594
- background: var(--react-autoql-background-color-primary, #fff);
1595
- color: var(--react-autoql-text-color-primary, #404040);
1596
- font-family: var(--react-autoql-font-family), sans-serif;
1597
- overflow: hidden;
1598
- border-radius: 4px;
1599
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1600
-
1601
- .react-autoql-dashboard-tile-inner-div {
1602
- height: 100%;
1603
- width: 100%;
1604
- background: inherit;
1605
- position: relative;
1606
- text-align: center;
1607
- display: flex;
1608
- justify-content: flex-start;
1609
- flex-direction: column;
1610
- align-items: center; }
1611
-
1612
- .dashboard-data-limit-warning-icon {
1613
- color: var(--react-autoql-warning-color) !important;
1614
- position: absolute !important;
1615
- bottom: 40px;
1616
- right: 16px;
1617
- font-size: 20px; }
1618
-
1619
- .react-autoql-dashboard-tile-drag-handle {
1620
- transition: opacity 0.3s ease;
1621
- position: absolute;
1622
- background-color: var(--react-autoql-border-color, #f7f7f7);
1623
- cursor: move;
1624
- opacity: 0; }
1625
- .react-autoql-dashboard-tile-drag-handle.top {
1626
- top: 0;
1627
- left: 0;
1628
- width: 100%;
1629
- height: 15px; }
1630
- .react-autoql-dashboard-tile-drag-handle.bottom {
1631
- bottom: 0;
1632
- left: 0;
1633
- width: 100%;
1634
- height: 15px; }
1635
- .react-autoql-dashboard-tile-drag-handle.left {
1636
- top: 0;
1637
- left: 0;
1638
- width: 15px;
1639
- height: 100%; }
1640
- .react-autoql-dashboard-tile-drag-handle.right {
1641
- top: 0;
1642
- right: 0;
1643
- width: 15px;
1644
- height: 100%; }
1645
-
1646
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1647
- opacity: 1; }
1648
-
1649
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1650
- transition: opacity 0.3s ease, color 0.3s ease;
1651
- visibility: hidden;
1652
- opacity: 0;
1653
- bottom: 8px;
1654
- right: 8px;
1655
- z-index: 1; }
1621
+ .react-autoql-notification-settings {
1622
+ background-color: var(--react-autoql-background-color-secondary);
1623
+ color: var(--react-autoql-text-color-primary);
1624
+ padding-top: 20px;
1625
+ height: 100%; }
1626
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1627
+ margin: 20px;
1628
+ margin-top: 10px;
1629
+ border-radius: 4px;
1630
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1631
+ background-color: var(--react-autoql-background-color-primary);
1632
+ overflow: hidden; }
1633
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1634
+ height: 55px;
1635
+ line-height: 55px;
1636
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1637
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1638
+ margin-right: 10px;
1639
+ cursor: pointer; }
1640
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1641
+ padding-right: 20px;
1642
+ font-size: 17px;
1643
+ opacity: 1;
1644
+ cursor: pointer;
1645
+ color: var(--react-autoql-accent-color); }
1646
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1647
+ background: rgba(0, 0, 0, 0.01); }
1648
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1649
+ opacity: 0;
1650
+ margin-right: 20px;
1651
+ font-size: 16px;
1652
+ transition: all 0.2s ease;
1653
+ color: var(--react-autoql-text-color-primary);
1654
+ cursor: pointer; }
1655
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1656
+ color: var(--react-autoql-accent-color);
1657
+ opacity: 1 !important; }
1658
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1659
+ opacity: 0.5; }
1660
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1661
+ display: flex;
1662
+ justify-content: space-between;
1663
+ height: 56px;
1664
+ padding-left: 25px;
1665
+ padding-right: 8px;
1666
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1667
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1668
+ margin-bottom: 4px;
1669
+ margin-right: 8px; }
1670
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1671
+ margin-bottom: 4px;
1672
+ margin-right: 8px;
1673
+ opacity: 0.5;
1674
+ pointer-events: none; }
1675
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1676
+ display: flex;
1677
+ justify-content: space-between;
1678
+ align-items: center;
1679
+ padding: 5px 20px;
1680
+ padding-bottom: 0;
1681
+ color: var(--react-autoql-text-color-primary); }
1682
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1683
+ display: inline-block;
1684
+ height: 35px;
1685
+ width: 35px;
1686
+ border-radius: 20px;
1687
+ background: var(--react-autoql-accent-color, #26a7df);
1688
+ color: white;
1689
+ line-height: 38px;
1690
+ text-align: center;
1691
+ font-size: 20px;
1692
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1693
+ transition: all 0.2s ease;
1694
+ margin-right: 5px;
1695
+ cursor: pointer; }
1696
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1697
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1698
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1699
+ white-space: nowrap;
1700
+ overflow: hidden;
1701
+ text-overflow: ellipsis;
1702
+ padding-right: 10px; }
1703
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1704
+ opacity: 0.5; }
1705
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1706
+ vertical-align: middle;
1707
+ height: 18px; }
1708
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1709
+ display: flex;
1710
+ align-items: center;
1711
+ margin-top: -25px; }
1712
+
1713
+ .react-autoql-notifications-button-container {
1714
+ position: relative;
1715
+ display: inline-block;
1716
+ font-size: inherit;
1717
+ line-height: 1em;
1718
+ width: 1em; }
1719
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1720
+ font-size: 1em;
1721
+ line-height: 0;
1722
+ vertical-align: bottom; }
1723
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1724
+ position: absolute;
1725
+ border: 2px solid #fff;
1726
+ background: #f5222d;
1727
+ border-radius: 6.3em;
1728
+ line-height: 1.3em;
1729
+ left: 0.6em;
1730
+ top: -0.8em;
1731
+ padding: 0.15em 0.5em;
1732
+ text-align: center;
1733
+ color: white;
1734
+ font-size: 0.5em; }
1735
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1736
+ position: absolute;
1737
+ display: inline-block;
1738
+ border: 2px solid #fff;
1739
+ background: #f5222d;
1740
+ border-radius: 50%;
1741
+ height: 0.6em;
1742
+ width: 0.6em;
1743
+ left: 0.5em;
1744
+ top: -2px; }
1745
+
1746
+ .notification-rule-outer-container {
1747
+ position: relative;
1748
+ border: 1px solid transparent;
1749
+ border-radius: 4px;
1750
+ padding-bottom: 5px; }
1751
+
1752
+ .expression-error-message {
1753
+ padding-left: 5px; }
1754
+
1755
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1756
+ border: none; }
1757
+
1758
+ .react-autoql-dashboard .react-grid-item {
1759
+ background: var(--react-autoql-background-color-primary, #fff);
1760
+ color: var(--react-autoql-text-color-primary, #404040);
1761
+ font-family: var(--react-autoql-font-family), sans-serif;
1762
+ overflow: hidden;
1763
+ border-radius: 4px;
1764
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1765
+
1766
+ .react-autoql-dashboard-tile-inner-div {
1767
+ height: 100%;
1768
+ width: 100%;
1769
+ background: inherit;
1770
+ position: relative;
1771
+ text-align: center;
1772
+ display: flex;
1773
+ justify-content: flex-start;
1774
+ flex-direction: column;
1775
+ align-items: center; }
1776
+
1777
+ .dashboard-data-limit-warning-icon {
1778
+ color: var(--react-autoql-warning-color) !important;
1779
+ position: absolute !important;
1780
+ bottom: 40px;
1781
+ right: 16px;
1782
+ font-size: 20px; }
1783
+
1784
+ .react-autoql-dashboard-tile-drag-handle {
1785
+ transition: opacity 0.3s ease;
1786
+ position: absolute;
1787
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1788
+ cursor: move;
1789
+ opacity: 0; }
1790
+ .react-autoql-dashboard-tile-drag-handle.top {
1791
+ top: 0;
1792
+ left: 0;
1793
+ width: 100%;
1794
+ height: 15px; }
1795
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1796
+ bottom: 0;
1797
+ left: 0;
1798
+ width: 100%;
1799
+ height: 15px; }
1800
+ .react-autoql-dashboard-tile-drag-handle.left {
1801
+ top: 0;
1802
+ left: 0;
1803
+ width: 15px;
1804
+ height: 100%; }
1805
+ .react-autoql-dashboard-tile-drag-handle.right {
1806
+ top: 0;
1807
+ right: 0;
1808
+ width: 15px;
1809
+ height: 100%; }
1810
+
1811
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1812
+ opacity: 1; }
1813
+
1814
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1815
+ transition: opacity 0.3s ease, color 0.3s ease;
1816
+ visibility: hidden;
1817
+ opacity: 0;
1818
+ bottom: 8px;
1819
+ right: 8px;
1820
+ z-index: 1; }
1656
1821
 
1657
1822
  .dashboard-tile-viz-toolbar-container {
1658
1823
  transition: opacity 0.3s ease, color 0.3s ease;
@@ -2086,496 +2251,49 @@ span.react-autoql-icon {
2086
2251
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2087
2252
  background: inherit; }
2088
2253
 
2089
- .react-autoql-notification-settings {
2090
- background-color: var(--react-autoql-background-color-secondary);
2091
- color: var(--react-autoql-text-color-primary);
2092
- padding-top: 20px;
2093
- height: 100%; }
2094
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
2095
- margin: 20px;
2096
- margin-top: 10px;
2097
- border-radius: 4px;
2098
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2099
- background-color: var(--react-autoql-background-color-primary);
2100
- overflow: hidden; }
2101
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
2102
- height: 55px;
2103
- line-height: 55px;
2104
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
2105
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
2106
- margin-right: 10px;
2107
- cursor: pointer; }
2108
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
2109
- padding-right: 20px;
2110
- font-size: 17px;
2111
- opacity: 1;
2112
- cursor: pointer;
2113
- color: var(--react-autoql-accent-color); }
2114
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
2115
- background: rgba(0, 0, 0, 0.01); }
2116
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
2117
- opacity: 0;
2118
- margin-right: 20px;
2119
- font-size: 16px;
2120
- transition: all 0.2s ease;
2121
- color: var(--react-autoql-text-color-primary);
2122
- cursor: pointer; }
2123
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
2124
- color: var(--react-autoql-accent-color);
2125
- opacity: 1 !important; }
2126
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
2127
- opacity: 0.5; }
2128
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
2129
- display: flex;
2130
- justify-content: space-between;
2131
- height: 56px;
2132
- padding-left: 25px;
2133
- padding-right: 8px;
2134
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2135
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
2136
- margin-bottom: 4px;
2137
- margin-right: 8px; }
2138
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
2139
- margin-bottom: 4px;
2140
- margin-right: 8px;
2141
- opacity: 0.5;
2142
- pointer-events: none; }
2143
- .react-autoql-notification-settings .react-autoql-notification-title-container {
2144
- display: flex;
2145
- justify-content: space-between;
2146
- align-items: center;
2147
- padding: 5px 20px;
2148
- padding-bottom: 0;
2149
- color: var(--react-autoql-text-color-primary); }
2150
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
2151
- display: inline-block;
2152
- height: 35px;
2153
- width: 35px;
2154
- border-radius: 20px;
2155
- background: var(--react-autoql-accent-color, #26a7df);
2156
- color: white;
2157
- line-height: 38px;
2158
- text-align: center;
2159
- font-size: 20px;
2160
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2161
- transition: all 0.2s ease;
2162
- margin-right: 5px;
2163
- cursor: pointer; }
2164
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
2165
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
2166
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
2167
- white-space: nowrap;
2168
- overflow: hidden;
2169
- text-overflow: ellipsis;
2170
- padding-right: 10px; }
2171
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2172
- opacity: 0.5; }
2173
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
2174
- vertical-align: middle;
2175
- margin-bottom: 4px;
2176
- height: 18px; }
2177
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
2178
- display: flex;
2179
- align-items: center;
2180
- margin-top: -25px; }
2181
-
2182
- .react-autoql-step-container a {
2183
- color: var(--react-autoql-accent-color, #26a7df); }
2184
-
2185
- .frequency-date-select-container {
2186
- margin-top: 10px; }
2187
-
2188
- .notification-frequency-step {
2189
- display: flex; }
2190
- .notification-frequency-step .frequency-category-select {
2191
- position: relative;
2192
- padding-top: 9px; }
2193
- .notification-frequency-step .notification-frequency-select {
2194
- margin-left: 8px; }
2195
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2196
- line-height: 33px; }
2197
- .notification-frequency-step .frequency-repeat-follow-text {
2198
- line-height: 32px;
2199
- vertical-align: top; }
2200
- .notification-frequency-step .frequency-settings-container {
2201
- flex: 0 1 400px; }
2202
-
2203
- .schedule-builder-timezone-section {
2204
- margin: 10px 5px; }
2205
- .schedule-builder-timezone-section .react-autoql-timezone-select {
2206
- display: inline-block;
2207
- width: 300px; }
2208
-
2209
- .react-autoql-notifications-button-container {
2210
- position: relative;
2211
- display: inline-block;
2212
- font-size: inherit;
2213
- line-height: 1em;
2214
- width: 1em; }
2215
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
2216
- font-size: 1em;
2217
- line-height: 0;
2218
- vertical-align: bottom; }
2219
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
2220
- position: absolute;
2221
- border: 2px solid #fff;
2222
- background: #f5222d;
2223
- border-radius: 6.3em;
2224
- line-height: 1.3em;
2225
- left: 0.6em;
2226
- top: -0.8em;
2227
- padding: 0.15em 0.5em;
2228
- text-align: center;
2229
- color: white;
2230
- font-size: 0.5em; }
2231
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
2232
- position: absolute;
2233
- display: inline-block;
2234
- border: 2px solid #fff;
2235
- background: #f5222d;
2236
- border-radius: 50%;
2237
- height: 0.6em;
2238
- width: 0.6em;
2239
- left: 0.5em;
2240
- top: -2px; }
2241
-
2242
- .notification-rule-outer-container {
2243
- position: relative;
2244
- border: 1px solid transparent;
2245
- border-radius: 4px;
2246
- padding-bottom: 5px; }
2247
-
2248
- .expression-error-message {
2249
- padding-left: 5px; }
2250
-
2251
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
- border: none; }
2253
-
2254
- .query-tips-page-container {
2255
- height: 100%;
2256
- padding: 10px; }
2257
- .query-tips-page-container .chat-bar-input-icon {
2258
- top: 20px;
2259
- left: 26px; }
2260
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2261
- padding-left: 46px; }
2262
-
2263
- .query-tips-result-container {
2264
- color: var(--react-autoql-text-color-primary);
2265
- padding: 0px 20px;
2266
- text-align: center;
2267
- max-width: 550px;
2268
- margin: 0 auto; }
2269
- .query-tips-result-container .query-tip-list-container {
2270
- margin-bottom: 20px; }
2271
- .query-tips-result-container .animated-item {
2272
- -webkit-animation: fadeIn 0.3s linear;
2273
- animation: fadeIn 0.3s linear;
2274
- -webkit-animation-fill-mode: both;
2275
- animation-fill-mode: both; }
2276
- .query-tips-result-container .query-tip-item {
2277
- position: relative;
2278
- padding: 13px;
2279
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2280
- cursor: pointer; }
2281
- .query-tips-result-container .query-tip-item:first-child {
2282
- border-top: none; }
2283
- .query-tips-result-container .query-tip-item .execute-btn {
2284
- position: absolute;
2285
- right: 10px;
2286
- top: 4px;
2287
- font-size: 20px;
2288
- visibility: hidden;
2289
- opacity: 0; }
2290
- .query-tips-result-container .query-tip-item:hover {
2291
- font-weight: bold;
2292
- color: var(--react-autoql-accent-color); }
2293
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2294
- visibility: visible;
2295
- opacity: 1; }
2296
- .query-tips-result-container .query-tips-result-placeholder {
2297
- margin-top: 50px;
2298
- opacity: 0.6; }
2299
-
2300
- .chat-bar-loading-spinner {
2301
- position: absolute;
2302
- right: 20px;
2303
- top: 22px; }
2304
-
2305
- #react-paginate {
2306
- position: relative;
2307
- background: transparent;
2308
- padding: 8px; }
2309
- #react-paginate ul {
2310
- display: inline-block;
2311
- padding-left: 0;
2312
- margin-bottom: 0; }
2313
- #react-paginate li {
2314
- display: inline-block;
2315
- color: var(--react-autoql-text-color-primary);
2316
- cursor: pointer;
2317
- margin-right: 3px;
2318
- border-radius: 5px;
2319
- margin-bottom: 0;
2320
- -webkit-user-select: none;
2321
- -moz-user-select: none;
2322
- -ms-user-select: none;
2323
- user-select: none; }
2324
- #react-paginate li:hover {
2325
- opacity: 0.7;
2326
- border-radius: 50%; }
2327
- #react-paginate li a {
2328
- display: inline-block;
2329
- color: var(--react-autoql-text-color-primary);
2330
- outline: none;
2331
- width: 28px;
2332
- height: 28px;
2333
- line-height: 28px; }
2334
- #react-paginate li.selected {
2335
- background: var(--react-autoql-accent-color);
2336
- border-radius: 50%;
2337
- outline: none; }
2338
- #react-paginate li.selected a {
2339
- color: #fff; }
2340
- #react-paginate .pagination-next.disabled,
2341
- #react-paginate .pagination-previous.disabled {
2342
- opacity: 0.5;
2343
- pointer-events: none; }
2344
- #react-paginate .pagination-previous,
2345
- #react-paginate .pagination-next {
2346
- position: absolute;
2347
- font-size: 18px; }
2348
- #react-paginate .pagination-previous a,
2349
- #react-paginate .pagination-next a {
2350
- color: var(--react-autoql-accent-color); }
2351
- #react-paginate .pagination-previous {
2352
- left: 20px; }
2353
- #react-paginate .pagination-next {
2354
- right: 20px; }
2355
-
2356
- .animated-item:nth-child(1) {
2357
- -webkit-animation-delay: 0.08s;
2358
- animation-delay: 0.08s; }
2359
-
2360
- .animated-item:nth-child(2) {
2361
- -webkit-animation-delay: 0.16s;
2362
- animation-delay: 0.16s; }
2363
-
2364
- .animated-item:nth-child(3) {
2365
- -webkit-animation-delay: 0.24s;
2366
- animation-delay: 0.24s; }
2367
-
2368
- .animated-item:nth-child(4) {
2369
- -webkit-animation-delay: 0.32s;
2370
- animation-delay: 0.32s; }
2371
-
2372
- .animated-item:nth-child(5) {
2373
- -webkit-animation-delay: 0.4s;
2374
- animation-delay: 0.4s; }
2375
-
2376
- .animated-item:nth-child(6) {
2377
- -webkit-animation-delay: 0.48s;
2378
- animation-delay: 0.48s; }
2379
-
2380
- .animated-item:nth-child(7) {
2381
- -webkit-animation-delay: 0.56s;
2382
- animation-delay: 0.56s; }
2383
-
2384
- .animated-item:nth-child(8) {
2385
- -webkit-animation-delay: 0.64s;
2386
- animation-delay: 0.64s; }
2387
-
2388
- .animated-item:nth-child(9) {
2389
- -webkit-animation-delay: 0.72s;
2390
- animation-delay: 0.72s; }
2391
-
2392
- .animated-item:nth-child(10) {
2393
- -webkit-animation-delay: 0.8s;
2394
- animation-delay: 0.8s; }
2395
-
2396
- .animated-item:nth-child(11) {
2397
- -webkit-animation-delay: 0.88s;
2398
- animation-delay: 0.88s; }
2399
-
2400
- .animated-item:nth-child(12) {
2401
- -webkit-animation-delay: 0.96s;
2402
- animation-delay: 0.96s; }
2403
-
2404
- .animated-item:nth-child(13) {
2405
- -webkit-animation-delay: 1.04s;
2406
- animation-delay: 1.04s; }
2407
-
2408
- .animated-item:nth-child(14) {
2409
- -webkit-animation-delay: 1.12s;
2410
- animation-delay: 1.12s; }
2411
-
2412
- .animated-item:nth-child(15) {
2413
- -webkit-animation-delay: 1.2s;
2414
- animation-delay: 1.2s; }
2415
-
2416
- @-webkit-keyframes fadeIn {
2417
- 0% {
2418
- opacity: 0;
2419
- top: 100px; }
2420
- 75% {
2421
- opacity: 0.5;
2422
- top: 0px; }
2423
- 100% {
2424
- opacity: 1; } }
2425
-
2426
- .react-autoql-condition-locking-input {
2427
- padding: 5px;
2428
- padding-left: 20px;
2429
- margin: 10px;
2430
- height: 32px;
2431
- box-sizing: border-box;
2432
- border-radius: 24px;
2433
- font-size: 12px;
2434
- font-family: inherit;
2435
- letter-spacing: 0.04em;
2436
- outline: none !important;
2437
- width: calc(100% - 60px);
2438
- font-family: inherit;
2439
- /* Default styles outside of data messenger */
2440
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2441
- background: var(--react-autoql-background-color-primary);
2442
- color: #5d5d5d; }
2443
-
2444
- .condition-table {
2445
- min-width: 95%;
2446
- margin: 10px auto; }
2447
-
2448
- .condition-table thead {
2449
- padding-left: 10px; }
2450
-
2451
- .condition-table th {
2452
- text-align: left;
2453
- padding: 4px;
2454
- margin: 0 10px 0 10px;
2455
- font-weight: 800; }
2456
-
2457
- .react-autoql-accept-conditions-button {
2458
- text-align: right;
2459
- margin-bottom: 12px;
2460
- padding-right: 10px;
2461
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2462
- transition: color 0.1s ease; }
2463
- .react-autoql-accept-conditions-button span {
2464
- opacity: 0.8;
2465
- cursor: pointer; }
2466
- .react-autoql-accept-conditions-button span:hover {
2467
- opacity: 1; }
2468
-
2469
- .condition-table tr {
2470
- cursor: pointer; }
2471
- .condition-table tr:hover {
2472
- background: var(--react-autoql-accent-color);
2473
- color: white; }
2474
-
2475
- .condition-table td {
2476
- text-align: left;
2477
- padding: 4px;
2478
- margin: 0 10px 0 10px;
2479
- padding-left: 10px; }
2480
-
2481
- .condition-list {
2482
- padding: 0;
2483
- margin: 0 auto; }
2484
-
2485
- .condition-list-item {
2486
- cursor: pointer;
2487
- padding: 4px;
2488
- margin: 0 10px 0 10px;
2489
- display: flex;
2490
- justify-content: space-between;
2491
- border-radius: 2px;
2492
- padding-left: 10px; }
2493
- .condition-list-item:hover {
2494
- background: var(--react-autoql-accent-color);
2495
- color: white; }
2496
-
2497
- .empty-condition-list {
2498
- text-align: center;
2499
- padding: 4px;
2500
- margin: 0 20px 0 20px; }
2501
-
2502
- .autoql-close-button {
2503
- background-color: inherit;
2504
- border: none;
2505
- text-align: left;
2506
- font-size: 20px;
2507
- margin-top: -20px;
2508
- float: none !important;
2509
- color: inherit; }
2510
-
2511
- .react-tiny-popover-container {
2512
- background: var(--react-autoql-background-color-primary); }
2513
-
2514
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2515
- flex-grow: 1;
2516
- display: inline;
2517
- width: 90%;
2518
- height: 100%; }
2519
-
2520
- .autoql-condition-locking-menu-container
2521
- .react-autosuggest__suggestions-container--open {
2522
- position: absolute;
2523
- overflow-y: scroll !important;
2524
- padding-top: 5px;
2525
- padding-bottom: 5px;
2526
- display: block;
2527
- font-family: inherit;
2528
- font-size: 15px;
2529
- font-weight: normal;
2530
- z-index: 2;
2531
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2532
- text-align: left;
2533
- width: 95%;
2534
- top: 35px;
2535
- border-radius: 4px;
2536
- margin: 10px auto;
2537
- height: auto;
2538
- max-height: 50vh;
2539
- overflow-y: auto; }
2540
-
2541
- .autoql-condition-locking-menu-container
2542
- .react-autosuggest__suggestions-container--open {
2543
- background-color: var(--react-autoql-background-color-primary);
2544
- border: 1px solid var(--react-autoql-border-color);
2545
- color: var(--react-autoql-text-color-primary); }
2546
-
2547
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2548
- color: var(--react-autoql-text-color-primary); }
2549
-
2550
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2551
- opacity: 0.5; }
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; }
2552
2261
 
2553
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2554
- opacity: 0.5; }
2262
+ .react-autoql-btn.disabled {
2263
+ opacity: 0.4;
2264
+ cursor: not-allowed;
2265
+ pointer-events: none; }
2555
2266
 
2556
- .autoql-condition-locking-menu-container input::placeholder {
2557
- opacity: 0.5; }
2267
+ .react-autoql-btn.small {
2268
+ padding: 2px 8px;
2269
+ margin: 2px 3px; }
2558
2270
 
2559
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2560
- margin: 0;
2561
- padding: 0;
2562
- list-style-type: none; }
2271
+ .react-autoql-btn.large {
2272
+ padding: 5px 16px;
2273
+ margin: 2px 5px; }
2563
2274
 
2564
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2565
- cursor: pointer;
2566
- padding: 2px;
2567
- padding-left: 18px;
2568
- letter-spacing: 0.05em;
2569
- line-height: 22.5px; }
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); }
2570
2282
 
2571
- .autoql-condition-locking-menu-container
2572
- .react-autosuggest__suggestion--highlighted {
2573
- background-color: rgba(0, 0, 0, 0.1) !important; }
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; }
2574
2289
 
2575
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2576
- padding: 10px 0 0 10px;
2577
- font-size: 12px;
2578
- color: #777; }
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; }
2579
2297
 
2580
2298
  .chat-single-message-container {
2581
2299
  transition: background-color 0.2s ease;
@@ -2727,77 +2445,303 @@ so we dont have to redraw the whole table */
2727
2445
  .report-problem-menu span.react-autoql-icon svg {
2728
2446
  margin-right: 3px; }
2729
2447
 
2730
- .interpretation-icon {
2731
- vertical-align: top;
2732
- height: 26px;
2733
- margin: 0 3px;
2734
- font-size: 18px; }
2448
+ .interpretation-icon {
2449
+ vertical-align: top;
2450
+ height: 26px;
2451
+ margin: 0 3px;
2452
+ font-size: 18px; }
2453
+
2454
+ /* Chart icon styles */
2455
+ .chart-icon-svg-0,
2456
+ .react-autoql-icon-svg-0 {
2457
+ fill: currentColor; }
2458
+
2459
+ .hm0 {
2460
+ opacity: 0.5;
2461
+ fill: currentColor;
2462
+ enable-background: new; }
2463
+
2464
+ .hm1 {
2465
+ fill: currentColor; }
2466
+
2467
+ .hm2 {
2468
+ opacity: 0.15;
2469
+ fill: currentColor;
2470
+ enable-background: new; }
2471
+
2472
+ .hm3 {
2473
+ opacity: 0.6;
2474
+ fill: currentColor;
2475
+ enable-background: new; }
2476
+
2477
+ .hm4 {
2478
+ opacity: 0.65;
2479
+ fill: currentColor;
2480
+ enable-background: new; }
2481
+
2482
+ .hm5 {
2483
+ fill: currentColor; }
2484
+
2485
+ .hm6 {
2486
+ fill: currentColor; }
2487
+
2488
+ /* animations */
2489
+ @-webkit-keyframes scale-up-br {
2490
+ 0% {
2491
+ transform: scale(0.5);
2492
+ transform-origin: 100% 100%; }
2493
+ 100% {
2494
+ transform: scale(1);
2495
+ transform-origin: 100% 100%; } }
2496
+ @keyframes scale-up-br {
2497
+ 0% {
2498
+ transform: scale(0.5);
2499
+ transform-origin: 100% 100%; }
2500
+ 100% {
2501
+ transform: scale(1);
2502
+ transform-origin: 100% 100%; } }
2503
+
2504
+ @-webkit-keyframes scale-up-bl {
2505
+ 0% {
2506
+ transform: scale(0.5);
2507
+ transform-origin: 0% 100%; }
2508
+ 100% {
2509
+ transform: scale(1);
2510
+ transform-origin: 0% 100%; } }
2511
+
2512
+ @keyframes scale-up-bl {
2513
+ 0% {
2514
+ transform: scale(0.5);
2515
+ transform-origin: 0% 100%; }
2516
+ 100% {
2517
+ transform: scale(1);
2518
+ transform-origin: 0% 100%; } }
2519
+
2520
+ .query-tips-page-container {
2521
+ height: 100%;
2522
+ padding: 10px; }
2523
+ .query-tips-page-container .chat-bar-input-icon {
2524
+ top: 20px;
2525
+ left: 26px; }
2526
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2527
+ padding-left: 46px; }
2528
+
2529
+ .query-tips-result-container {
2530
+ color: var(--react-autoql-text-color-primary);
2531
+ padding: 0px 20px;
2532
+ text-align: center;
2533
+ max-width: 550px;
2534
+ margin: 0 auto; }
2535
+ .query-tips-result-container .query-tip-list-container {
2536
+ margin-bottom: 20px; }
2537
+ .query-tips-result-container .animated-item {
2538
+ -webkit-animation: fadeIn 0.3s linear;
2539
+ animation: fadeIn 0.3s linear;
2540
+ -webkit-animation-fill-mode: both;
2541
+ animation-fill-mode: both; }
2542
+ .query-tips-result-container .query-tip-item {
2543
+ position: relative;
2544
+ padding: 13px;
2545
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2546
+ cursor: pointer; }
2547
+ .query-tips-result-container .query-tip-item:first-child {
2548
+ border-top: none; }
2549
+ .query-tips-result-container .query-tip-item .execute-btn {
2550
+ position: absolute;
2551
+ right: 10px;
2552
+ top: 4px;
2553
+ font-size: 20px;
2554
+ visibility: hidden;
2555
+ opacity: 0; }
2556
+ .query-tips-result-container .query-tip-item:hover {
2557
+ font-weight: bold;
2558
+ color: var(--react-autoql-accent-color); }
2559
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2560
+ visibility: visible;
2561
+ opacity: 1; }
2562
+ .query-tips-result-container .query-tips-result-placeholder {
2563
+ margin-top: 50px;
2564
+ opacity: 0.6; }
2565
+
2566
+ .chat-bar-loading-spinner {
2567
+ position: absolute;
2568
+ right: 20px;
2569
+ top: 22px; }
2570
+
2571
+ #react-paginate {
2572
+ position: relative;
2573
+ background: transparent;
2574
+ padding: 8px; }
2575
+ #react-paginate ul {
2576
+ display: inline-block;
2577
+ padding-left: 0;
2578
+ margin-bottom: 0; }
2579
+ #react-paginate li {
2580
+ display: inline-block;
2581
+ color: var(--react-autoql-text-color-primary);
2582
+ cursor: pointer;
2583
+ margin-right: 3px;
2584
+ border-radius: 5px;
2585
+ margin-bottom: 0;
2586
+ -webkit-user-select: none;
2587
+ -moz-user-select: none;
2588
+ -ms-user-select: none;
2589
+ user-select: none; }
2590
+ #react-paginate li:hover {
2591
+ opacity: 0.7;
2592
+ border-radius: 50%; }
2593
+ #react-paginate li a {
2594
+ display: inline-block;
2595
+ color: var(--react-autoql-text-color-primary);
2596
+ outline: none;
2597
+ width: 28px;
2598
+ height: 28px;
2599
+ line-height: 28px; }
2600
+ #react-paginate li.selected {
2601
+ background: var(--react-autoql-accent-color);
2602
+ border-radius: 50%;
2603
+ outline: none; }
2604
+ #react-paginate li.selected a {
2605
+ color: #fff; }
2606
+ #react-paginate .pagination-next.disabled,
2607
+ #react-paginate .pagination-previous.disabled {
2608
+ opacity: 0.5;
2609
+ pointer-events: none; }
2610
+ #react-paginate .pagination-previous,
2611
+ #react-paginate .pagination-next {
2612
+ position: absolute;
2613
+ font-size: 18px; }
2614
+ #react-paginate .pagination-previous a,
2615
+ #react-paginate .pagination-next a {
2616
+ color: var(--react-autoql-accent-color); }
2617
+ #react-paginate .pagination-previous {
2618
+ left: 20px; }
2619
+ #react-paginate .pagination-next {
2620
+ right: 20px; }
2621
+
2622
+ .animated-item:nth-child(1) {
2623
+ -webkit-animation-delay: 0.08s;
2624
+ animation-delay: 0.08s; }
2625
+
2626
+ .animated-item:nth-child(2) {
2627
+ -webkit-animation-delay: 0.16s;
2628
+ animation-delay: 0.16s; }
2629
+
2630
+ .animated-item:nth-child(3) {
2631
+ -webkit-animation-delay: 0.24s;
2632
+ animation-delay: 0.24s; }
2633
+
2634
+ .animated-item:nth-child(4) {
2635
+ -webkit-animation-delay: 0.32s;
2636
+ animation-delay: 0.32s; }
2637
+
2638
+ .animated-item:nth-child(5) {
2639
+ -webkit-animation-delay: 0.4s;
2640
+ animation-delay: 0.4s; }
2735
2641
 
2736
- /* Chart icon styles */
2737
- .chart-icon-svg-0,
2738
- .react-autoql-icon-svg-0 {
2739
- fill: currentColor; }
2642
+ .animated-item:nth-child(6) {
2643
+ -webkit-animation-delay: 0.48s;
2644
+ animation-delay: 0.48s; }
2740
2645
 
2741
- .hm0 {
2742
- opacity: 0.5;
2743
- fill: currentColor;
2744
- enable-background: new; }
2646
+ .animated-item:nth-child(7) {
2647
+ -webkit-animation-delay: 0.56s;
2648
+ animation-delay: 0.56s; }
2745
2649
 
2746
- .hm1 {
2747
- fill: currentColor; }
2650
+ .animated-item:nth-child(8) {
2651
+ -webkit-animation-delay: 0.64s;
2652
+ animation-delay: 0.64s; }
2748
2653
 
2749
- .hm2 {
2750
- opacity: 0.15;
2751
- fill: currentColor;
2752
- enable-background: new; }
2654
+ .animated-item:nth-child(9) {
2655
+ -webkit-animation-delay: 0.72s;
2656
+ animation-delay: 0.72s; }
2753
2657
 
2754
- .hm3 {
2755
- opacity: 0.6;
2756
- fill: currentColor;
2757
- enable-background: new; }
2658
+ .animated-item:nth-child(10) {
2659
+ -webkit-animation-delay: 0.8s;
2660
+ animation-delay: 0.8s; }
2758
2661
 
2759
- .hm4 {
2760
- opacity: 0.65;
2761
- fill: currentColor;
2762
- enable-background: new; }
2662
+ .animated-item:nth-child(11) {
2663
+ -webkit-animation-delay: 0.88s;
2664
+ animation-delay: 0.88s; }
2763
2665
 
2764
- .hm5 {
2765
- fill: currentColor; }
2666
+ .animated-item:nth-child(12) {
2667
+ -webkit-animation-delay: 0.96s;
2668
+ animation-delay: 0.96s; }
2766
2669
 
2767
- .hm6 {
2768
- fill: currentColor; }
2670
+ .animated-item:nth-child(13) {
2671
+ -webkit-animation-delay: 1.04s;
2672
+ animation-delay: 1.04s; }
2769
2673
 
2770
- /* animations */
2771
- @-webkit-keyframes scale-up-br {
2772
- 0% {
2773
- transform: scale(0.5);
2774
- transform-origin: 100% 100%; }
2775
- 100% {
2776
- transform: scale(1);
2777
- transform-origin: 100% 100%; } }
2778
- @keyframes scale-up-br {
2779
- 0% {
2780
- transform: scale(0.5);
2781
- transform-origin: 100% 100%; }
2782
- 100% {
2783
- transform: scale(1);
2784
- transform-origin: 100% 100%; } }
2674
+ .animated-item:nth-child(14) {
2675
+ -webkit-animation-delay: 1.12s;
2676
+ animation-delay: 1.12s; }
2785
2677
 
2786
- @-webkit-keyframes scale-up-bl {
2787
- 0% {
2788
- transform: scale(0.5);
2789
- transform-origin: 0% 100%; }
2790
- 100% {
2791
- transform: scale(1);
2792
- transform-origin: 0% 100%; } }
2678
+ .animated-item:nth-child(15) {
2679
+ -webkit-animation-delay: 1.2s;
2680
+ animation-delay: 1.2s; }
2793
2681
 
2794
- @keyframes scale-up-bl {
2682
+ @-webkit-keyframes fadeIn {
2795
2683
  0% {
2796
- transform: scale(0.5);
2797
- transform-origin: 0% 100%; }
2684
+ opacity: 0;
2685
+ top: 100px; }
2686
+ 75% {
2687
+ opacity: 0.5;
2688
+ top: 0px; }
2798
2689
  100% {
2799
- transform: scale(1);
2800
- transform-origin: 0% 100%; } }
2690
+ opacity: 1; } }
2691
+
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; }
2801
2745
 
2802
2746
  .ReactModal__Overlay {
2803
2747
  background-color: transparent !important;
@@ -2879,103 +2823,159 @@ so we dont have to redraw the whole table */
2879
2823
  .react-autoql-modal-close-btn:hover {
2880
2824
  opacity: 1 !important; }
2881
2825
 
2882
- .react-autoql-cascader {
2883
- position: relative;
2884
- white-space: nowrap;
2885
- overflow: hidden;
2886
- min-width: 300px; }
2887
- .react-autoql-cascader .options-container {
2888
- transition: max-width 0.3s ease;
2889
- display: inline-block;
2890
- vertical-align: top;
2891
- padding: 0 10px;
2892
- margin: 10px 0;
2893
- width: 100%;
2894
- max-width: calc(100% - 20px);
2895
- white-space: pre-wrap; }
2896
- .react-autoql-cascader .options-container.hidden {
2897
- max-width: 0; }
2898
- .react-autoql-cascader .options-container.hidden span {
2899
- white-space: nowrap; }
2900
- .react-autoql-cascader .options-container.hidden .option {
2901
- opacity: 0;
2902
- pointer-events: none; }
2903
- .react-autoql-cascader .options-container .options-title {
2904
- padding: 4px;
2905
- padding-left: 10px;
2906
- font-weight: 600; }
2907
- .react-autoql-cascader .options-container .cascader-back-arrow {
2908
- position: absolute;
2909
- cursor: pointer;
2910
- top: 15px;
2911
- left: 0; }
2912
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2913
- opacity: 0.8; }
2914
- .react-autoql-cascader .options-container .option {
2915
- cursor: pointer;
2916
- padding: 4px;
2917
- display: flex;
2918
- justify-content: space-between;
2919
- border-radius: 2px;
2920
- padding-left: 10px; }
2921
- .react-autoql-cascader .options-container .option .option-arrow {
2922
- opacity: 0.7; }
2923
- .react-autoql-cascader .options-container .option .option-execute-icon {
2924
- opacity: 0;
2925
- color: #fff;
2926
- font-size: 16px;
2927
- vertical-align: middle; }
2928
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2929
- background-color: var(--react-autoql-accent-color, #26a7df);
2930
- color: #fff; }
2931
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2932
- opacity: 1; }
2933
- .react-autoql-cascader .options-container:not(:last-child) {
2934
- border-right: 1px solid #d3d3d352; }
2826
+ .react-autoql-condition-locking-input {
2827
+ padding: 5px;
2828
+ padding-left: 20px;
2829
+ margin: 10px;
2830
+ height: 32px;
2831
+ box-sizing: border-box;
2832
+ border-radius: 24px;
2833
+ font-size: 12px;
2834
+ font-family: inherit;
2835
+ letter-spacing: 0.04em;
2836
+ outline: none !important;
2837
+ width: calc(100% - 60px);
2838
+ font-family: inherit;
2839
+ /* Default styles outside of data messenger */
2840
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2841
+ background: var(--react-autoql-background-color-primary);
2842
+ color: #5d5d5d; }
2843
+
2844
+ .condition-table {
2845
+ min-width: 95%;
2846
+ margin: 10px auto; }
2847
+
2848
+ .condition-table thead {
2849
+ padding-left: 10px; }
2850
+
2851
+ .condition-table th {
2852
+ text-align: left;
2853
+ padding: 4px;
2854
+ margin: 0 10px 0 10px;
2855
+ font-weight: 800; }
2856
+
2857
+ .react-autoql-accept-conditions-button {
2858
+ text-align: right;
2859
+ margin-bottom: 12px;
2860
+ padding-right: 10px;
2861
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2862
+ transition: color 0.1s ease; }
2863
+ .react-autoql-accept-conditions-button span {
2864
+ opacity: 0.8;
2865
+ cursor: pointer; }
2866
+ .react-autoql-accept-conditions-button span:hover {
2867
+ opacity: 1; }
2868
+
2869
+ .condition-table tr {
2870
+ cursor: pointer; }
2871
+ .condition-table tr:hover {
2872
+ background: var(--react-autoql-accent-color);
2873
+ color: white; }
2874
+
2875
+ .condition-table td {
2876
+ text-align: left;
2877
+ padding: 4px;
2878
+ margin: 0 10px 0 10px;
2879
+ padding-left: 10px; }
2935
2880
 
2936
- .react-autoql-btn {
2937
- border-radius: 4px;
2881
+ .condition-list {
2882
+ padding: 0;
2883
+ margin: 0 auto; }
2884
+
2885
+ .condition-list-item {
2938
2886
  cursor: pointer;
2939
- outline: none !important;
2940
- transition: all 0.2s ease;
2941
- width: auto;
2942
- display: inline-block; }
2887
+ padding: 4px;
2888
+ margin: 0 10px 0 10px;
2889
+ display: flex;
2890
+ justify-content: space-between;
2891
+ border-radius: 2px;
2892
+ padding-left: 10px; }
2893
+ .condition-list-item:hover {
2894
+ background: var(--react-autoql-accent-color);
2895
+ color: white; }
2943
2896
 
2944
- .react-autoql-btn.disabled {
2945
- opacity: 0.4;
2946
- cursor: not-allowed;
2947
- pointer-events: none; }
2897
+ .empty-condition-list {
2898
+ text-align: center;
2899
+ padding: 4px;
2900
+ margin: 0 20px 0 20px; }
2948
2901
 
2949
- .react-autoql-btn.small {
2950
- padding: 2px 8px;
2951
- margin: 2px 3px; }
2902
+ .autoql-close-button {
2903
+ background-color: inherit;
2904
+ border: none;
2905
+ text-align: left;
2906
+ font-size: 20px;
2907
+ margin-top: -20px;
2908
+ float: none !important;
2909
+ color: inherit; }
2952
2910
 
2953
- .react-autoql-btn.large {
2954
- padding: 5px 16px;
2955
- margin: 2px 5px; }
2911
+ .react-tiny-popover-container {
2912
+ background: var(--react-autoql-background-color-primary); }
2956
2913
 
2957
- .react-autoql-btn.default {
2958
- color: inherit;
2914
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2915
+ flex-grow: 1;
2916
+ display: inline;
2917
+ width: 90%;
2918
+ height: 100%; }
2919
+
2920
+ .autoql-condition-locking-menu-container
2921
+ .react-autosuggest__suggestions-container--open {
2922
+ position: absolute;
2923
+ overflow-y: scroll !important;
2924
+ padding-top: 5px;
2925
+ padding-bottom: 5px;
2926
+ display: block;
2927
+ font-family: inherit;
2928
+ font-size: 15px;
2929
+ font-weight: normal;
2930
+ z-index: 2;
2931
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2932
+ text-align: left;
2933
+ width: 95%;
2934
+ top: 35px;
2935
+ border-radius: 4px;
2936
+ margin: 10px auto;
2937
+ height: auto;
2938
+ max-height: 50vh;
2939
+ overflow-y: auto; }
2940
+
2941
+ .autoql-condition-locking-menu-container
2942
+ .react-autosuggest__suggestions-container--open {
2943
+ background-color: var(--react-autoql-background-color-primary);
2959
2944
  border: 1px solid var(--react-autoql-border-color);
2960
- background: inherit; }
2961
- .react-autoql-btn.default:hover {
2962
- border-color: var(--react-autoql-accent-color);
2963
- color: var(--react-autoql-accent-color); }
2945
+ color: var(--react-autoql-text-color-primary); }
2964
2946
 
2965
- .react-autoql-btn.primary {
2966
- background: var(--react-autoql-accent-color);
2967
- border: 1px solid var(--react-autoql-accent-color);
2968
- color: white; }
2969
- .react-autoql-btn.primary:hover {
2970
- opacity: 0.8; }
2947
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2948
+ color: var(--react-autoql-text-color-primary); }
2971
2949
 
2972
- .react-autoql-btn.danger {
2973
- color: var(--react-autoql-danger-color, #ca0b00);
2974
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2975
- background: inherit; }
2976
- .react-autoql-btn.danger:hover {
2977
- background-color: var(--react-autoql-danger-color, #ca0b00);
2978
- color: #fff; }
2950
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2951
+ opacity: 0.5; }
2952
+
2953
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2954
+ opacity: 0.5; }
2955
+
2956
+ .autoql-condition-locking-menu-container input::placeholder {
2957
+ opacity: 0.5; }
2958
+
2959
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2960
+ margin: 0;
2961
+ padding: 0;
2962
+ list-style-type: none; }
2963
+
2964
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2965
+ cursor: pointer;
2966
+ padding: 2px;
2967
+ padding-left: 18px;
2968
+ letter-spacing: 0.05em;
2969
+ line-height: 22.5px; }
2970
+
2971
+ .autoql-condition-locking-menu-container
2972
+ .react-autosuggest__suggestion--highlighted {
2973
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2974
+
2975
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2976
+ padding: 10px 0 0 10px;
2977
+ font-size: 12px;
2978
+ color: #777; }
2979
2979
 
2980
2980
  .autoql-options-toolbar {
2981
2981
  position: absolute;
@@ -3276,10 +3276,181 @@ the whole table when the filter button is clicked */
3276
3276
  .axis-selector-container .axis-selector-content li:hover {
3277
3277
  background: rgba(0, 0, 0, 0.05); }
3278
3278
 
3279
- .axis-selector-apply-btn {
3280
- background: var(--react-autoql-background-color-primary);
3281
- padding: 5px; }
3279
+ .axis-selector-apply-btn {
3280
+ background: var(--react-autoql-background-color-primary);
3281
+ padding: 5px; }
3282
+
3283
+ .react-autoql-radio-btn-container {
3284
+ display: inline-block;
3285
+ border-radius: 4px; }
3286
+ .react-autoql-radio-btn-container [type='radio']:checked,
3287
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3288
+ position: absolute;
3289
+ left: -9999px; }
3290
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3291
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3292
+ position: relative;
3293
+ padding-left: 28px;
3294
+ cursor: pointer;
3295
+ line-height: 20px;
3296
+ display: inline-block; }
3297
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3298
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3299
+ content: '';
3300
+ position: absolute;
3301
+ left: 1px;
3302
+ top: 1px;
3303
+ width: 18px;
3304
+ height: 18px;
3305
+ border: 1px solid #ddd;
3306
+ border-radius: 100%;
3307
+ background: #fff; }
3308
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3309
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3310
+ content: '';
3311
+ width: 12px;
3312
+ height: 12px;
3313
+ background: var(--react-autoql-accent-color, #26a7df);
3314
+ position: absolute;
3315
+ top: 4px;
3316
+ left: 4px;
3317
+ border-radius: 100%;
3318
+ transition: all 0.2s ease; }
3319
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3320
+ opacity: 0;
3321
+ transform: scale(0); }
3322
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3323
+ opacity: 1;
3324
+ transform: scale(1); }
3325
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3326
+ position: relative;
3327
+ display: inline-block;
3328
+ padding: 3px 12px;
3329
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3330
+ margin-left: -1px;
3331
+ transition: all 0.2s ease;
3332
+ cursor: pointer; }
3333
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3334
+ background-color: var(--react-autoql-accent-color, #26a7df);
3335
+ border-color: var(--react-autoql-accent-color, #26a7df);
3336
+ color: #fff;
3337
+ z-index: 3; }
3338
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3339
+ background-color: inherit;
3340
+ color: var(--react-autoql-accent-color, #26a7df);
3341
+ z-index: 3; }
3342
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3343
+ border-color: var(--react-autoql-accent-color, #26a7df);
3344
+ color: var(--react-autoql-accent-color, #26a7df);
3345
+ z-index: 2; }
3346
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3347
+ border-top-left-radius: 4px;
3348
+ border-bottom-left-radius: 4px;
3349
+ margin-left: 0; }
3350
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3351
+ border-top-right-radius: 4px;
3352
+ border-bottom-right-radius: 4px; }
3353
+
3354
+
3355
+ .react-autoql-steps-container {
3356
+ margin: 10px; }
3357
+
3358
+ .react-autoql-step-container {
3359
+ position: relative;
3360
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3361
+ margin-left: 12px;
3362
+ padding-left: 20px;
3363
+ padding-bottom: 5px;
3364
+ transition: all 0.5s ease; }
3365
+ .react-autoql-step-container.complete {
3366
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3367
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3368
+ border-color: var(--react-autoql-accent-color, #26a7df);
3369
+ background: var(--react-autoql-accent-color, #26a7df);
3370
+ color: #fff; }
3371
+ .react-autoql-step-container.error {
3372
+ border-color: var(--react-autoql-warning-color); }
3373
+ .react-autoql-step-container.error .react-autoql-step-dot {
3374
+ border-color: var(--react-autoql-warning-color);
3375
+ background: var(--react-autoql-warning-color);
3376
+ color: white; }
3377
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3378
+ pointer-events: none;
3379
+ height: 10px;
3380
+ opacity: 0;
3381
+ margin: 0; }
3382
+
3383
+ .react-autoql-step-dot {
3384
+ position: absolute;
3385
+ top: 0;
3386
+ left: -10px;
3387
+ height: 20px;
3388
+ width: 20px;
3389
+ border-radius: 15px;
3390
+ background: var(--react-autoql-background-color-primary, #fff);
3391
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3392
+ transition: all 0.5s ease;
3393
+ font-size: 10.5px;
3394
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3395
+ text-align: center; }
3396
+
3397
+ .react-autoql-step-title-container:hover {
3398
+ cursor: pointer;
3399
+ transition: color 0.2s ease;
3400
+ color: var(--react-autoql-accent-color, #26a7df); }
3401
+
3402
+ .react-autoql-step-title {
3403
+ font-weight: 500;
3404
+ font-size: 15px;
3405
+ line-height: 15px;
3406
+ padding-top: 2px; }
3407
+
3408
+ .react-autoql-step-subtitle {
3409
+ font-size: 13px;
3410
+ padding-top: 6px;
3411
+ padding-bottom: 6px;
3412
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3413
+
3414
+ .react-autoql-step-content {
3415
+ margin: 15px;
3416
+ margin-top: 0; }
3417
+
3418
+ .react-autoql-step-content-container {
3419
+ transition-timing-function: ease;
3420
+ transition-property: height, opacity, margin;
3421
+ transition-duration: 0.5s;
3422
+ opacity: 1; }
3423
+
3424
+ .viz-toolbar {
3425
+ position: absolute;
3426
+ background: inherit;
3427
+ padding: 5px;
3428
+ border-radius: 6px;
3429
+ line-height: 28px;
3430
+ border: 1px solid #d3d3d352; }
3431
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3432
+ display: block; }
3433
+
3434
+ .react-autoql-toolbar-btn {
3435
+ height: 28px;
3436
+ width: 28px;
3437
+ background: none;
3438
+ border: none;
3439
+ font-size: 16px;
3440
+ line-height: 28px;
3441
+ vertical-align: top;
3442
+ color: var(--react-autoql-accent-color);
3443
+ cursor: pointer;
3444
+ outline: none !important; }
3445
+
3446
+ .react-autoql-toolbar-btn.green {
3447
+ color: #2ecc40; }
3448
+
3449
+ .react-autoql-toolbar-btn.red {
3450
+ color: #e80000; }
3282
3451
 
3452
+ .react-autoql-toolbar-btn:hover {
3453
+ opacity: 0.7; }
3283
3454
 
3284
3455
  .react-autoql-input-container {
3285
3456
  position: relative;
@@ -3332,77 +3503,6 @@ the whole table when the filter button is clicked */
3332
3503
  opacity: 1;
3333
3504
  color: var(--react-autoql-accent-color, #26a7df); }
3334
3505
 
3335
- .react-autoql-radio-btn-container {
3336
- display: inline-block;
3337
- border-radius: 4px; }
3338
- .react-autoql-radio-btn-container [type='radio']:checked,
3339
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3340
- position: absolute;
3341
- left: -9999px; }
3342
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3343
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3344
- position: relative;
3345
- padding-left: 28px;
3346
- cursor: pointer;
3347
- line-height: 20px;
3348
- display: inline-block; }
3349
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3350
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3351
- content: '';
3352
- position: absolute;
3353
- left: 1px;
3354
- top: 1px;
3355
- width: 18px;
3356
- height: 18px;
3357
- border: 1px solid #ddd;
3358
- border-radius: 100%;
3359
- background: #fff; }
3360
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3361
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3362
- content: '';
3363
- width: 12px;
3364
- height: 12px;
3365
- background: var(--react-autoql-accent-color, #26a7df);
3366
- position: absolute;
3367
- top: 4px;
3368
- left: 4px;
3369
- border-radius: 100%;
3370
- transition: all 0.2s ease; }
3371
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3372
- opacity: 0;
3373
- transform: scale(0); }
3374
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3375
- opacity: 1;
3376
- transform: scale(1); }
3377
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3378
- position: relative;
3379
- display: inline-block;
3380
- padding: 3px 12px;
3381
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3382
- margin-left: -1px;
3383
- transition: all 0.2s ease;
3384
- cursor: pointer; }
3385
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3386
- background-color: var(--react-autoql-accent-color, #26a7df);
3387
- border-color: var(--react-autoql-accent-color, #26a7df);
3388
- color: #fff;
3389
- z-index: 3; }
3390
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3391
- background-color: inherit;
3392
- color: var(--react-autoql-accent-color, #26a7df);
3393
- z-index: 3; }
3394
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3395
- border-color: var(--react-autoql-accent-color, #26a7df);
3396
- color: var(--react-autoql-accent-color, #26a7df);
3397
- z-index: 2; }
3398
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3399
- border-top-left-radius: 4px;
3400
- border-bottom-left-radius: 4px;
3401
- margin-left: 0; }
3402
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3403
- border-top-right-radius: 4px;
3404
- border-bottom-right-radius: 4px; }
3405
-
3406
3506
  .content {
3407
3507
  margin: 2rem; }
3408
3508
 
@@ -3459,264 +3559,81 @@ the whole table when the filter button is clicked */
3459
3559
  pointer-events: none; }
3460
3560
 
3461
3561
  .react-autoql-checkbox--switch__input::before {
3462
- box-shadow: 0 0 2px 1px #00000030; }
3463
-
3464
- .react-autoql-checkbox__input:checked::before,
3465
- .react-autoql-checkbox__input:indeterminate::before {
3466
- top: 0;
3467
- right: 0;
3468
- bottom: 0;
3469
- left: 0; }
3470
-
3471
- .react-autoql-checkbox__input:indeterminate::before {
3472
- top: 7px;
3473
- bottom: 7px; }
3474
-
3475
- .react-autoql-checkbox__input:disabled {
3476
- border-color: #5a5358;
3477
- cursor: default; }
3478
-
3479
- .react-autoql-checkbox__input:disabled::before {
3480
- background-color: #5a5358; }
3481
-
3482
- .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3483
- color: gray;
3484
- cursor: default; }
3485
-
3486
- .react-autoql-checkbox--has-error__input {
3487
- border-color: red;
3488
- background-color: rgba(255, 0, 0, 0.2); }
3489
-
3490
- .react-autoql-checkbox--has-error__input::before {
3491
- background-color: red; }
3492
-
3493
- .react-autoql-checkbox--switch__label::after {
3494
- content: 'off';
3495
- margin-left: 0.25rem; }
3496
-
3497
- .react-autoql-checkbox--switch__input {
3498
- width: 36px;
3499
- height: 20px;
3500
- border-radius: 16px;
3501
- background: var(--react-autoql-background-color-tertiary);
3502
- border: 1px solid var(--react-autoql-background-color-tertiary); }
3503
-
3504
- .react-autoql-checkbox--switch__input::before {
3505
- top: 2px;
3506
- right: 18px;
3507
- bottom: 2px;
3508
- left: 2px;
3509
- border-radius: 50%;
3510
- background: #fff; }
3511
-
3512
- .react-autoql-checkbox--switch__input:checked
3513
- + .react-autoql-checkbox--switch__label::after {
3514
- content: 'on'; }
3515
-
3516
- .react-autoql-checkbox--switch__input:checked::before {
3517
- right: 2px;
3518
- left: 18px;
3519
- top: 2px;
3520
- bottom: 2px; }
3521
-
3522
- .react-autoql-checkbox-label {
3523
- padding-left: 6px;
3524
- line-height: 100%; }
3525
-
3526
- .react-autoql-modal-container
3527
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3528
- .react-autoql-drawer
3529
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3530
- border-color: var(--react-autoql-accent-color); }
3531
-
3532
- .react-autoql-modal-container
3533
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3534
- .react-autoql-drawer
3535
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3536
- background: var(--react-autoql-accent-color); }
3537
-
3538
- .viz-toolbar {
3539
- position: absolute;
3540
- background: inherit;
3541
- padding: 5px;
3542
- border-radius: 6px;
3543
- line-height: 28px;
3544
- border: 1px solid #d3d3d352; }
3545
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3546
- display: block; }
3547
-
3548
- .react-autoql-toolbar-btn {
3549
- height: 28px;
3550
- width: 28px;
3551
- background: none;
3552
- border: none;
3553
- font-size: 16px;
3554
- line-height: 28px;
3555
- vertical-align: top;
3556
- color: var(--react-autoql-accent-color);
3557
- cursor: pointer;
3558
- outline: none !important; }
3559
-
3560
- .react-autoql-toolbar-btn.green {
3561
- color: #2ecc40; }
3562
-
3563
- .react-autoql-toolbar-btn.red {
3564
- color: #e80000; }
3565
-
3566
- .react-autoql-toolbar-btn:hover {
3567
- opacity: 0.7; }
3568
-
3569
- .react-autoql-steps-container {
3570
- margin: 10px; }
3571
-
3572
- .react-autoql-step-container {
3573
- position: relative;
3574
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3575
- margin-left: 12px;
3576
- padding-left: 20px;
3577
- padding-bottom: 5px;
3578
- transition: all 0.5s ease; }
3579
- .react-autoql-step-container.complete {
3580
- border-color: var(--react-autoql-accent-color, #26a7df); }
3581
- .react-autoql-step-container.complete .react-autoql-step-dot {
3582
- border-color: var(--react-autoql-accent-color, #26a7df);
3583
- background: var(--react-autoql-accent-color, #26a7df);
3584
- color: #fff; }
3585
- .react-autoql-step-container.error {
3586
- border-color: var(--react-autoql-warning-color); }
3587
- .react-autoql-step-container.error .react-autoql-step-dot {
3588
- border-color: var(--react-autoql-warning-color);
3589
- background: var(--react-autoql-warning-color);
3590
- color: white; }
3591
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3592
- pointer-events: none;
3593
- height: 10px;
3594
- opacity: 0;
3595
- margin: 0; }
3562
+ box-shadow: 0 0 2px 1px #00000030; }
3596
3563
 
3597
- .react-autoql-step-dot {
3598
- position: absolute;
3564
+ .react-autoql-checkbox__input:checked::before,
3565
+ .react-autoql-checkbox__input:indeterminate::before {
3599
3566
  top: 0;
3600
- left: -10px;
3601
- height: 20px;
3602
- width: 20px;
3603
- border-radius: 15px;
3604
- background: var(--react-autoql-background-color-primary, #fff);
3605
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3606
- transition: all 0.5s ease;
3607
- font-size: 10.5px;
3608
- color: var(--react-autoql-text-color-placeholder, lightgray);
3609
- text-align: center; }
3610
-
3611
- .react-autoql-step-title-container:hover {
3612
- cursor: pointer;
3613
- transition: color 0.2s ease;
3614
- color: var(--react-autoql-accent-color, #26a7df); }
3567
+ right: 0;
3568
+ bottom: 0;
3569
+ left: 0; }
3615
3570
 
3616
- .react-autoql-step-title {
3617
- font-weight: 500;
3618
- font-size: 15px;
3619
- line-height: 15px;
3620
- padding-top: 2px; }
3571
+ .react-autoql-checkbox__input:indeterminate::before {
3572
+ top: 7px;
3573
+ bottom: 7px; }
3621
3574
 
3622
- .react-autoql-step-subtitle {
3623
- font-size: 13px;
3624
- padding-top: 6px;
3625
- padding-bottom: 6px;
3626
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3575
+ .react-autoql-checkbox__input:disabled {
3576
+ border-color: #5a5358;
3577
+ cursor: default; }
3627
3578
 
3628
- .react-autoql-step-content {
3629
- margin: 15px;
3630
- margin-top: 0; }
3579
+ .react-autoql-checkbox__input:disabled::before {
3580
+ background-color: #5a5358; }
3631
3581
 
3632
- .react-autoql-step-content-container {
3633
- transition-timing-function: ease;
3634
- transition-property: height, opacity, margin;
3635
- transition-duration: 0.5s;
3636
- opacity: 1; }
3582
+ .react-autoql-checkbox__input:disabled + .react-autoql-checkbox__label {
3583
+ color: gray;
3584
+ cursor: default; }
3637
3585
 
3638
- .react-autoql-notification-rule-container {
3639
- display: flex; }
3640
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3641
- display: flex;
3642
- flex-direction: column;
3643
- flex: 1;
3644
- width: 100%; }
3645
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3646
- display: flex;
3647
- flex: 1; }
3648
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3649
- display: flex;
3650
- padding: 2px 0;
3651
- border-radius: 4px;
3652
- transition: all 0.3s ease;
3653
- flex: 1; }
3654
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3655
- flex: 0;
3656
- flex-basis: 33px; }
3657
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3658
- flex: 1;
3659
- margin-left: 4px; }
3660
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3661
- cursor: pointer;
3662
- opacity: 0.6;
3663
- padding: 6px; }
3664
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3665
- opacity: 1; }
3666
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3667
- display: none; }
3668
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3669
- margin: 0; }
3670
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3671
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3672
- + .react-autoql-rule-term-type-selector {
3673
- color: var(--react-autoql-accent-color, #26a7df);
3674
- border-color: var(--react-autoql-accent-color, #26a7df); }
3586
+ .react-autoql-checkbox--has-error__input {
3587
+ border-color: red;
3588
+ background-color: rgba(255, 0, 0, 0.2); }
3675
3589
 
3676
- .read-only-rule-term {
3677
- display: inline-block;
3678
- border: 1px solid rgba(0, 0, 0, 0.06);
3679
- background: rgba(0, 0, 0, 0.02);
3680
- padding: 3px 7px;
3681
- line-height: 1.5em;
3682
- margin-right: 5px;
3683
- margin-bottom: 2px;
3684
- margin-top: 2px;
3685
- border-radius: 4px; }
3590
+ .react-autoql-checkbox--has-error__input::before {
3591
+ background-color: red; }
3686
3592
 
3687
- .expression-term-validation-error {
3688
- padding: 0 10px;
3689
- color: var(--react-autoql-warning-color); }
3593
+ .react-autoql-checkbox--switch__label::after {
3594
+ content: 'off';
3595
+ margin-left: 0.25rem; }
3690
3596
 
3691
- .spinner-loader {
3692
- display: inline-block;
3693
- width: 14px;
3694
- height: 14px;
3695
- margin-right: 6px; }
3597
+ .react-autoql-checkbox--switch__input {
3598
+ width: 36px;
3599
+ height: 20px;
3600
+ border-radius: 16px;
3601
+ background: var(--react-autoql-background-color-tertiary);
3602
+ border: 1px solid var(--react-autoql-background-color-tertiary); }
3696
3603
 
3697
- .spinner-loader:after {
3698
- content: " ";
3699
- display: block;
3700
- width: 16px;
3701
- height: 16px;
3702
- margin: 0px;
3604
+ .react-autoql-checkbox--switch__input::before {
3605
+ top: 2px;
3606
+ right: 18px;
3607
+ bottom: 2px;
3608
+ left: 2px;
3703
3609
  border-radius: 50%;
3704
- border: 1px solid currentColor;
3705
- border-color: currentColor transparent currentColor transparent;
3706
- -webkit-animation: spinner-loader 1.2s linear infinite;
3707
- animation: spinner-loader 1.2s linear infinite; }
3610
+ background: #fff; }
3708
3611
 
3709
- @-webkit-keyframes spinner-loader {
3710
- 0% {
3711
- transform: rotate(0deg); }
3712
- 100% {
3713
- transform: rotate(360deg); } }
3612
+ .react-autoql-checkbox--switch__input:checked
3613
+ + .react-autoql-checkbox--switch__label::after {
3614
+ content: 'on'; }
3714
3615
 
3715
- @keyframes spinner-loader {
3716
- 0% {
3717
- transform: rotate(0deg); }
3718
- 100% {
3719
- transform: rotate(360deg); } }
3616
+ .react-autoql-checkbox--switch__input:checked::before {
3617
+ right: 2px;
3618
+ left: 18px;
3619
+ top: 2px;
3620
+ bottom: 2px; }
3621
+
3622
+ .react-autoql-checkbox-label {
3623
+ padding-left: 6px;
3624
+ line-height: 100%; }
3625
+
3626
+ .react-autoql-modal-container
3627
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3628
+ .react-autoql-drawer
3629
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3630
+ border-color: var(--react-autoql-accent-color); }
3631
+
3632
+ .react-autoql-modal-container
3633
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3634
+ .react-autoql-drawer
3635
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3636
+ background: var(--react-autoql-accent-color); }
3720
3637
 
3721
3638
  .notification-read-only-group {
3722
3639
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3836,6 +3753,90 @@ the whole table when the filter button is clicked */
3836
3753
  opacity: 1;
3837
3754
  color: var(--react-autoql-accent-color); }
3838
3755
 
3756
+ .react-autoql-notification-rule-container {
3757
+ display: flex; }
3758
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3759
+ display: flex;
3760
+ flex-direction: column;
3761
+ flex: 1;
3762
+ width: 100%; }
3763
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3764
+ display: flex;
3765
+ flex: 1; }
3766
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3767
+ display: flex;
3768
+ padding: 2px 0;
3769
+ border-radius: 4px;
3770
+ transition: all 0.3s ease;
3771
+ flex: 1; }
3772
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3773
+ flex: 0;
3774
+ flex-basis: 33px; }
3775
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3776
+ flex: 1;
3777
+ margin-left: 4px; }
3778
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3779
+ cursor: pointer;
3780
+ opacity: 0.6;
3781
+ padding: 6px; }
3782
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3783
+ opacity: 1; }
3784
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3785
+ display: none; }
3786
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3787
+ margin: 0; }
3788
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3789
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3790
+ + .react-autoql-rule-term-type-selector {
3791
+ color: var(--react-autoql-accent-color, #26a7df);
3792
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3793
+
3794
+ .read-only-rule-term {
3795
+ display: inline-block;
3796
+ border: 1px solid rgba(0, 0, 0, 0.06);
3797
+ background: rgba(0, 0, 0, 0.02);
3798
+ padding: 3px 7px;
3799
+ line-height: 1.5em;
3800
+ margin-right: 5px;
3801
+ margin-bottom: 2px;
3802
+ margin-top: 2px;
3803
+ border-radius: 4px; }
3804
+
3805
+ .expression-term-validation-error {
3806
+ padding: 0 10px;
3807
+ color: var(--react-autoql-warning-color); }
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
+
3839
+
3839
3840
 
3840
3841
  .slack-modal-error-container,
3841
3842
  .slack-modal-empty-list-message {
@@ -3982,7 +3983,6 @@ the whole table when the filter button is clicked */
3982
3983
  .slack-channel-list-container .connect-channel-btn button {
3983
3984
  width: 200px; }
3984
3985
 
3985
-
3986
3986
  .react-autoql-select {
3987
3987
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3988
3988
  border-radius: 4px;