react-autoql 3.5.0 → 3.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,102 +1,401 @@
1
- .react-autoql-bar-container {
1
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
2
+ .react-autoql-response-content-container:not(.html-content) {
2
3
  position: relative;
3
4
  display: flex;
4
- flex-direction: row; }
5
+ flex-direction: column;
6
+ justify-content: center;
7
+ align-items: center;
8
+ background-color: inherit;
9
+ font-size: 14px;
10
+ height: 100%;
11
+ width: 100%;
12
+ overflow: hidden;
13
+ color: var(--react-autoql-text-color-primary); }
5
14
 
6
- .react-autoql-chatbar-input {
7
- padding: 10px;
8
- padding-left: 20px;
9
- margin: 10px;
10
- height: 42px;
11
- width: calc(100% - 20px);
12
- white-space: nowrap;
13
- box-sizing: border-box;
14
- border-radius: 24px;
15
- font-size: 16px;
15
+ .react-autoql-response-content-container.html-content {
16
+ position: relative;
17
+ background-color: inherit;
18
+ text-align: left;
19
+ font-size: 14px;
20
+ height: 95%;
21
+ width: 100%;
22
+ overflow: hidden;
23
+ color: var(--react-autoql-text-color-primary); }
24
+ .react-autoql-response-content-container.html-content table th {
25
+ border-bottom: 2px solid var(--react-autoql-border-color); }
26
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
27
+ border-bottom: 1px solid var(--react-autoql-border-color); }
28
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
29
+ border-right: 1px solid var(--react-autoql-border-color); }
30
+ .react-autoql-response-content-container.html-content table th,
31
+ .react-autoql-response-content-container.html-content table td {
32
+ padding: 5px 10px; }
33
+ .react-autoql-response-content-container.html-content * {
34
+ font-size: inherit; }
35
+ .react-autoql-response-content-container.html-content sup,
36
+ .react-autoql-response-content-container.html-content sub {
37
+ font-size: 10px; }
38
+ .react-autoql-response-content-container.html-content > *:first-child {
39
+ margin-top: 0 !important; }
40
+ .react-autoql-response-content-container.html-content > *:last-child {
41
+ margin-bottom: 0 !important; }
42
+ .react-autoql-response-content-container.html-content caption {
43
+ display: table-caption;
44
+ text-align: -webkit-center;
45
+ padding-top: unset;
46
+ padding-bottom: unset;
47
+ color: unset;
48
+ text-align: unset;
49
+ caption-side: unset; }
50
+
51
+ .react-autoql-response-content-container.table {
52
+ max-height: 100vh !important;
53
+ overflow-y: scroll;
54
+ scrollbar-width: none;
55
+ margin-bottom: 0 !important; }
56
+
57
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
58
+ width: 0;
59
+ height: 0; }
60
+
61
+ .react-autoql-suggestion-btn {
62
+ padding: 6px 14px;
63
+ background: transparent;
16
64
  font-family: inherit;
17
- letter-spacing: 0.04em;
65
+ font-size: 12px;
66
+ margin-bottom: 5px;
18
67
  outline: none !important;
19
- width: calc(100% - 20px);
20
- font-family: inherit;
21
- /* Default styles outside of data messenger */
22
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
23
- background: var(--react-autoql-background-color-primary);
24
- color: #5d5d5d; }
68
+ cursor: pointer;
69
+ letter-spacing: 0.05em;
70
+ transition: all 0.1s ease;
71
+ border: 1px solid rgba(0, 0, 0, 0.15);
72
+ border-radius: 5px;
73
+ color: inherit; }
25
74
 
26
- .react-autoql-chatbar-input.left-padding {
27
- padding-left: 54px; }
75
+ .react-autoql-suggestion-btn:hover {
76
+ border-color: transparent;
77
+ color: white;
78
+ background: var(--react-autoql-accent-color); }
28
79
 
29
- .react-autoql-chatbar-input:disabled {
30
- background: rgba(0, 0, 0, 0.03); }
80
+ .react-autoql-help-link-btn {
81
+ padding: 6px 14px;
82
+ background: transparent;
83
+ border-radius: 5px;
84
+ font-family: inherit;
85
+ font-size: 12px;
86
+ margin-top: 5px;
87
+ outline: none !important;
88
+ cursor: pointer;
89
+ letter-spacing: 0.05em;
90
+ transition: all 0.1s ease;
91
+ border-color: #e2e2e26e;
92
+ color: inherit; }
31
93
 
32
- .react-autoql-chatbar-input:not(:disabled):hover {
33
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
94
+ .react-autoql-help-link-btn:hover {
95
+ opacity: 0.7; }
34
96
 
35
- .react-autoql-chatbar-input::-moz-placeholder {
36
- /* Default color outside of data messenger */
37
- color: #999 !important; }
97
+ .react-autoql-help-link-icon {
98
+ width: 15px;
99
+ height: 15px;
100
+ margin-bottom: -3px;
101
+ margin-right: 3px; }
38
102
 
39
- .react-autoql-chatbar-input:-ms-input-placeholder {
40
- /* Default color outside of data messenger */
41
- color: #999 !important; }
103
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
104
+ color: var(--react-autoql-success-color); }
42
105
 
43
- .react-autoql-chatbar-input::placeholder {
44
- /* Default color outside of data messenger */
45
- color: #999 !important; }
106
+ .react-autoql-suggestion-message {
107
+ height: 100%;
108
+ width: 100%;
109
+ word-break: break-word; }
46
110
 
47
- /* autosuggest */
48
- .react-autoql-bar-container .react-autosuggest__container,
49
- .react-autoql-chatbar-input-container {
111
+ .react-autoql-suggestions-select {
50
112
  position: relative;
51
- flex: 1; }
113
+ display: inline-block;
114
+ height: 30px;
115
+ background: none;
116
+ outline: none !important;
117
+ border: 1px solid;
118
+ font-family: inherit;
119
+ letter-spacing: 0.05em;
120
+ color: #28a8e0;
121
+ cursor: pointer;
122
+ font-size: inherit; }
52
123
 
53
- .react-autoql-bar-container .react-autosuggest__input--focused {
54
- outline: none; }
124
+ .no-columns-error-message {
125
+ position: absolute;
126
+ height: 100%;
127
+ width: 100%;
128
+ display: flex;
129
+ justify-content: center;
130
+ flex-direction: column;
131
+ text-align: center;
132
+ padding: 20px;
133
+ font-size: 13px; }
134
+ .no-columns-error-message .warning-icon {
135
+ font-size: 22px;
136
+ display: block;
137
+ margin-bottom: -13px;
138
+ text-align: center; }
139
+ .no-columns-error-message .eye-icon {
140
+ vertical-align: bottom;
141
+ line-height: 18px; }
55
142
 
56
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
57
- display: none; }
143
+ /* query validation */
144
+ .react-autoql-query-validation-selector-container {
145
+ display: inline-block;
146
+ position: relative; }
58
147
 
59
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
60
- display: none; }
148
+ .react-autoql-select-popup-container.query-validation-select {
149
+ padding: 5px 0;
150
+ letter-spacing: 0.03em;
151
+ font-family: var(--react-autoql-font-family), sans-serif; }
152
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
153
+ height: unset;
154
+ font-size: 14px;
155
+ line-height: 24px;
156
+ padding: 0 15px; }
157
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
158
+ color: #d84830; }
61
159
 
62
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
63
- position: absolute;
64
- top: 45px;
65
- bottom: unset;
66
- margin: 10px;
67
- padding-top: 5px;
68
- padding-bottom: 5px;
69
- display: block;
70
- width: calc(100% - 20px);
71
- height: unset;
72
- border-radius: 24px;
73
- font-family: inherit;
74
- font-size: 15px;
75
- font-weight: normal;
76
- z-index: 2;
77
- overflow: hidden;
78
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
79
- /* Default styles outside of data messenger */
80
- background-color: white;
81
- color: #5d5d5d; }
160
+ .react-autoql-query-validation-query {
161
+ text-align: center; }
82
162
 
83
- .react-autoql-bar-container.autosuggest-top
84
- .react-autosuggest__suggestions-container--open {
85
- top: unset;
86
- bottom: 45px; }
163
+ .react-autoql-query-validation-execute-btn {
164
+ height: 38px;
165
+ background: none;
166
+ border-radius: 4px;
167
+ margin-top: 24px;
168
+ width: 100%;
169
+ color: inherit;
170
+ cursor: pointer;
171
+ outline: none !important;
172
+ border-color: #e2e2e26e;
173
+ transition: all 0.2s ease; }
87
174
 
88
- .react-autoql-bar-container.autosuggest-bottom
89
- .react-autosuggest__suggestions-container--open {
90
- top: 45px;
91
- bottom: unset; }
175
+ .react-autoql-query-validation-execute-btn:hover {
176
+ border-color: #28a8e0; }
92
177
 
93
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
178
+ .react-autoql-execute-query-icon {
179
+ font-size: 16px;
180
+ vertical-align: middle !important;
181
+ padding-right: 3px !important; }
182
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
183
+ height: 19px;
184
+ width: 19px;
185
+ margin-top: 3px;
186
+ margin-right: 4px;
187
+ vertical-align: top;
188
+ fill: var(--react-autoql-accent-color); }
189
+
190
+ .react-autoql-query-validation-select {
191
+ position: relative;
192
+ display: inline-block;
193
+ height: 2em;
194
+ background: none;
195
+ outline: none !important;
196
+ border: none;
197
+ letter-spacing: 0.05em;
198
+ font-family: inherit;
199
+ font-size: inherit;
94
200
  margin: 0;
95
201
  padding: 0;
96
- list-style-type: none; }
202
+ border-radius: 0;
203
+ border-bottom: 1px dashed;
204
+ color: var(--react-autoql-accent-color); }
97
205
 
98
- /* Autocomplete styles */
99
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
206
+ .react-autoql-query-validation-delete-button {
207
+ position: relative;
208
+ cursor: pointer;
209
+ margin-bottom: -2px; }
210
+
211
+ .react-autoql-chart-tooltip {
212
+ font-family: var(--react-autoql-font-family), sans-serif;
213
+ letter-spacing: 0.04em;
214
+ line-height: 22px;
215
+ font-size: 13px;
216
+ padding: 7px 15px;
217
+ transition: all 0.2s ease !important;
218
+ text-align: left !important;
219
+ opacity: 1 !important;
220
+ z-index: 99999 !important;
221
+ /* necessary to show up on top of rc drawer */ }
222
+
223
+ .single-value-response {
224
+ color: inherit;
225
+ cursor: unset;
226
+ font-size: 20px; }
227
+ .single-value-response:hover {
228
+ color: inherit; }
229
+
230
+ .single-value-response.with-drilldown:hover {
231
+ color: inherit;
232
+ text-decoration: underline;
233
+ font-weight: 600;
234
+ cursor: pointer; }
235
+
236
+ .react-autoql-query-validation-container {
237
+ width: 100%; }
238
+
239
+ .react-autoql-query-validation-description {
240
+ margin-bottom: 14px; }
241
+
242
+ .context-menu {
243
+ background: var(--react-autoql-background-color-primary);
244
+ /* height: 100px; */
245
+ width: 150px;
246
+ padding: 10px 0; }
247
+
248
+ .context-menu-list {
249
+ list-style-type: none;
250
+ width: 100%;
251
+ margin: 0;
252
+ padding: 0; }
253
+
254
+ .context-menu-list li {
255
+ color: var(--react-autoql-text-color-primary);
256
+ width: 100%;
257
+ height: 35px;
258
+ line-height: 35px;
259
+ padding: 0 20px;
260
+ cursor: pointer; }
261
+
262
+ .context-menu-list li:hover {
263
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
264
+
265
+ .react-autoql-condition-link {
266
+ background: none !important;
267
+ border: none;
268
+ padding: 0 !important;
269
+ text-decoration: none;
270
+ white-space: nowrap;
271
+ cursor: pointer;
272
+ color: var(--react-autoql-accent-color); }
273
+ .react-autoql-condition-link:hover {
274
+ opacity: 0.9; }
275
+
276
+ .react-autoql-condition-link-filtered {
277
+ text-decoration: none;
278
+ white-space: nowrap;
279
+ cursor: pointer;
280
+ color: var(--react-autoql-accent-color); }
281
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
282
+ font-size: 14px;
283
+ vertical-align: middle;
284
+ margin-top: -4px; }
285
+ .react-autoql-condition-link-filtered:hover {
286
+ opacity: 0.9;
287
+ border: none !important; }
288
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
289
+ opacity: 0.9; }
290
+
291
+ .react-autoql-condition-lock-reverse-translation {
292
+ color: var(--react-autoql-text-color-primary);
293
+ background-color: var(--react-autoql-background-color-secondary);
294
+ border-radius: 5px;
295
+ padding: 4px 6px 4px 6px;
296
+ margin: 2px;
297
+ min-height: 26px;
298
+ min-width: 300px; }
299
+
300
+ .react-autoql-bar-container {
301
+ position: relative;
302
+ display: flex;
303
+ flex-direction: row; }
304
+
305
+ .react-autoql-chatbar-input {
306
+ padding: 10px;
307
+ padding-left: 20px;
308
+ margin: 10px;
309
+ height: 42px;
310
+ width: calc(100% - 20px);
311
+ white-space: nowrap;
312
+ box-sizing: border-box;
313
+ border-radius: 24px;
314
+ font-size: 16px;
315
+ font-family: inherit;
316
+ letter-spacing: 0.04em;
317
+ outline: none !important;
318
+ width: calc(100% - 20px);
319
+ font-family: inherit;
320
+ /* Default styles outside of data messenger */
321
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
322
+ background: var(--react-autoql-background-color-primary);
323
+ color: #5d5d5d; }
324
+
325
+ .react-autoql-chatbar-input.left-padding {
326
+ padding-left: 54px; }
327
+
328
+ .react-autoql-chatbar-input:disabled {
329
+ background: rgba(0, 0, 0, 0.03); }
330
+
331
+ .react-autoql-chatbar-input:not(:disabled):hover {
332
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
333
+
334
+ .react-autoql-chatbar-input::-moz-placeholder {
335
+ /* Default color outside of data messenger */
336
+ color: #999 !important; }
337
+
338
+ .react-autoql-chatbar-input:-ms-input-placeholder {
339
+ /* Default color outside of data messenger */
340
+ color: #999 !important; }
341
+
342
+ .react-autoql-chatbar-input::placeholder {
343
+ /* Default color outside of data messenger */
344
+ color: #999 !important; }
345
+
346
+ /* autosuggest */
347
+ .react-autoql-bar-container .react-autosuggest__container,
348
+ .react-autoql-chatbar-input-container {
349
+ position: relative;
350
+ flex: 1; }
351
+
352
+ .react-autoql-bar-container .react-autosuggest__input--focused {
353
+ outline: none; }
354
+
355
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
356
+ display: none; }
357
+
358
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
359
+ display: none; }
360
+
361
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
362
+ position: absolute;
363
+ top: 45px;
364
+ bottom: unset;
365
+ margin: 10px;
366
+ padding-top: 5px;
367
+ padding-bottom: 5px;
368
+ display: block;
369
+ width: calc(100% - 20px);
370
+ height: unset;
371
+ border-radius: 24px;
372
+ font-family: inherit;
373
+ font-size: 15px;
374
+ font-weight: normal;
375
+ z-index: 2;
376
+ overflow: hidden;
377
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
378
+ /* Default styles outside of data messenger */
379
+ background-color: white;
380
+ color: #5d5d5d; }
381
+
382
+ .react-autoql-bar-container.autosuggest-top
383
+ .react-autosuggest__suggestions-container--open {
384
+ top: unset;
385
+ bottom: 45px; }
386
+
387
+ .react-autoql-bar-container.autosuggest-bottom
388
+ .react-autosuggest__suggestions-container--open {
389
+ top: 45px;
390
+ bottom: unset; }
391
+
392
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
393
+ margin: 0;
394
+ padding: 0;
395
+ list-style-type: none; }
396
+
397
+ /* Autocomplete styles */
398
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
100
399
  background-color: var(--react-autoql-background-color-primary);
101
400
  border: 1px solid var(--react-autoql-border-color);
102
401
  color: var(--react-autoql-text-color-primary); }
@@ -144,56 +443,279 @@
144
443
  left: 30px;
145
444
  top: 15px; }
146
445
 
147
- .react-autoql-drawer {
148
- font-family: var(--react-autoql-font-family), sans-serif;
149
- line-height: 22px; }
150
-
151
- .react-autoql-drawer.disable-selection {
152
- -webkit-user-select: none;
153
- -moz-user-select: none;
154
- -ms-user-select: none;
155
- user-select: none; }
156
-
157
- .react-autoql-drawer .react-autoql-drawer-content-container {
158
- width: 100%;
159
- height: 100%;
160
- display: flex;
161
- background: var(--react-autoql-background-color-secondary);
446
+ .chat-voice-record-button {
447
+ width: 40px;
448
+ height: 40px;
449
+ border-radius: 24px;
450
+ margin: 10px;
451
+ margin-left: 0;
452
+ font-size: 18px;
453
+ line-height: 24px;
454
+ outline: none !important;
455
+ position: relative;
456
+ cursor: pointer;
162
457
  overflow: hidden;
163
- border-radius: 4px;
164
- flex-direction: column;
165
- justify-content: stretch; }
166
-
167
- .react-autoql-drawer .chat-header-container {
168
- display: flex;
169
- justify-content: space-between;
170
- width: 100%;
171
- height: 60px;
172
458
  background: var(--react-autoql-accent-color);
173
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
174
- flex-grow: 0;
459
+ color: white;
460
+ border: none;
175
461
  flex-shrink: 0;
176
- z-index: 1; }
462
+ flex-grow: 0; }
177
463
 
178
- .react-autoql-drawer .react-autoql-header-right-container {
179
- display: flex;
180
- justify-content: right;
181
- width: 100px; }
464
+ .chat-voice-record-button:hover {
465
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
182
466
 
183
- .react-autoql-drawer .react-autoql-header-center-container {
184
- position: relative;
185
- color: #fff;
186
- line-height: 60px;
187
- font-size: 18px;
188
- letter-spacing: 0.05em;
189
- font-weight: 600;
190
- overflow: hidden;
191
- text-overflow: ellipsis;
192
- white-space: nowrap; }
467
+ .chat-voice-record-button.listening {
468
+ background: #ff471a; }
193
469
 
194
- .react-autoql-drawer .header-title {
195
- -webkit-animation: fadeIn 0.3s;
196
- animation: fadeIn 0.3s; }
470
+ .chat-voice-record-icon {
471
+ vertical-align: top; }
472
+
473
+ .react-autoql-tooltip {
474
+ font-family: inherit;
475
+ letter-spacing: 0.04em;
476
+ padding: 7px 15px;
477
+ opacity: 1 !important;
478
+ z-index: 99999 !important; }
479
+
480
+ @-webkit-keyframes slide {
481
+ 0% {
482
+ transform: translateX(-100%); }
483
+ 100% {
484
+ transform: translateX(100%); } }
485
+
486
+ @keyframes slide {
487
+ 0% {
488
+ transform: translateX(-100%); }
489
+ 100% {
490
+ transform: translateX(100%); } }
491
+
492
+ @-webkit-keyframes move {
493
+ 0% {
494
+ left: 0;
495
+ opacity: 0; }
496
+ 5% {
497
+ opacity: 0; }
498
+ 48% {
499
+ opacity: 0.2; }
500
+ 80% {
501
+ opacity: 0; }
502
+ 100% {
503
+ left: 82%; } }
504
+
505
+ @keyframes move {
506
+ 0% {
507
+ left: 0;
508
+ opacity: 0; }
509
+ 5% {
510
+ opacity: 0; }
511
+ 48% {
512
+ opacity: 0.2; }
513
+ 80% {
514
+ opacity: 0; }
515
+ 100% {
516
+ left: 82%; } }
517
+
518
+ .react-autoql-icon {
519
+ position: relative;
520
+ opacity: 1; }
521
+ .react-autoql-icon.warning {
522
+ color: var(--react-autoql-warning-color) !important; }
523
+ .react-autoql-icon.danger {
524
+ color: var(--react-autoql-danger-color) !important; }
525
+
526
+ span.react-autoql-icon {
527
+ vertical-align: unset;
528
+ text-align: left;
529
+ margin: 0;
530
+ padding: 0;
531
+ float: none !important;
532
+ color: inherit; }
533
+ span.react-autoql-icon svg {
534
+ float: none !important;
535
+ color: inherit;
536
+ vertical-align: unset;
537
+ text-align: left;
538
+ margin: 0;
539
+ padding: 0;
540
+ opacity: 1;
541
+ height: 1em;
542
+ margin-bottom: -0.1em; }
543
+
544
+ .slack-logo {
545
+ display: inline-block;
546
+ height: 100%;
547
+ margin-bottom: 3px; }
548
+ .slack-logo img {
549
+ vertical-align: middle;
550
+ height: 1em;
551
+ width: 1em; }
552
+
553
+ .react-autoql-badge {
554
+ position: absolute;
555
+ background: var(--react-autoql-warning-color);
556
+ border: 1px solid var(--react-autoql-background-color-primary);
557
+ width: 0.5em;
558
+ height: 0.5em;
559
+ top: -0.1em;
560
+ right: -0.25em;
561
+ border-radius: 50%;
562
+ box-sizing: content-box; }
563
+
564
+ .loading-container-centered {
565
+ height: 100%;
566
+ width: 100%;
567
+ display: flex;
568
+ flex-direction: column;
569
+ justify-content: center;
570
+ align-items: center; }
571
+
572
+ .response-loading {
573
+ display: inline-block;
574
+ position: relative;
575
+ width: 64px;
576
+ height: 64px; }
577
+
578
+ .response-loading div {
579
+ position: absolute;
580
+ top: 27px;
581
+ width: 11px;
582
+ height: 11px;
583
+ border-radius: 50%;
584
+ background: #e2e2e2;
585
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
586
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
587
+
588
+ .response-loading div:nth-child(1) {
589
+ left: 6px;
590
+ -webkit-animation: response-loading1 0.6s infinite;
591
+ animation: response-loading1 0.6s infinite; }
592
+
593
+ .response-loading div:nth-child(2) {
594
+ left: 6px;
595
+ -webkit-animation: response-loading2 0.6s infinite;
596
+ animation: response-loading2 0.6s infinite; }
597
+
598
+ .response-loading div:nth-child(3) {
599
+ left: 26px;
600
+ -webkit-animation: response-loading2 0.6s infinite;
601
+ animation: response-loading2 0.6s infinite; }
602
+
603
+ .response-loading div:nth-child(4) {
604
+ left: 45px;
605
+ -webkit-animation: response-loading3 0.6s infinite;
606
+ animation: response-loading3 0.6s infinite; }
607
+
608
+ .react-autoql-dashboard-container {
609
+ background: var(--react-autoql-background-color-secondary);
610
+ height: 100%;
611
+ width: 100%;
612
+ overflow: hidden; }
613
+
614
+ .react-autoql-dashboard-container.edit-mode {
615
+ padding-bottom: 200px; }
616
+
617
+ .dashboard-drilldown-modal .ReactModal__Content {
618
+ top: unset !important;
619
+ margin-top: 20px !important;
620
+ max-height: 93vh !important; }
621
+
622
+ .dashboard-drilldown-modal .react-autoql-modal-body {
623
+ padding: 0; }
624
+
625
+ .dashboard-drilldown-modal .react-autoql-table {
626
+ opacity: 0.9;
627
+ font-size: 11px; }
628
+
629
+ .dashboard-drilldown-modal .splitter-layout {
630
+ height: calc(100% - 55px); }
631
+
632
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
633
+ padding: 20px;
634
+ padding-bottom: 10px; }
635
+
636
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
637
+ text-align: right;
638
+ width: 100%;
639
+ padding-right: 20px; }
640
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
641
+ position: absolute;
642
+ bottom: 5px;
643
+ width: 100px;
644
+ right: 0; }
645
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
646
+ padding-top: 10px;
647
+ margin-bottom: -8px; }
648
+
649
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
650
+ padding: 20px;
651
+ padding-top: 10px;
652
+ overflow: hidden;
653
+ height: 100%; }
654
+
655
+ .empty-dashboard-message-container {
656
+ font-family: var(--react-autoql-font-family);
657
+ color: var(--react-autoql-text-color-primary);
658
+ letter-spacing: 0.02em;
659
+ text-align: center;
660
+ padding: 100px;
661
+ height: 100%;
662
+ width: 100%; }
663
+
664
+ .empty-dashboard-new-tile-btn {
665
+ color: var(--react-autoql-accent-color);
666
+ font-weight: bold;
667
+ cursor: pointer; }
668
+
669
+ .react-autoql-drawer {
670
+ font-family: var(--react-autoql-font-family), sans-serif;
671
+ line-height: 22px; }
672
+
673
+ .react-autoql-drawer.disable-selection {
674
+ -webkit-user-select: none;
675
+ -moz-user-select: none;
676
+ -ms-user-select: none;
677
+ user-select: none; }
678
+
679
+ .react-autoql-drawer .react-autoql-drawer-content-container {
680
+ width: 100%;
681
+ height: 100%;
682
+ display: flex;
683
+ background: var(--react-autoql-background-color-secondary);
684
+ overflow: hidden;
685
+ border-radius: 4px;
686
+ flex-direction: column;
687
+ justify-content: stretch; }
688
+
689
+ .react-autoql-drawer .chat-header-container {
690
+ display: flex;
691
+ justify-content: space-between;
692
+ width: 100%;
693
+ height: 60px;
694
+ background: var(--react-autoql-accent-color);
695
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
696
+ flex-grow: 0;
697
+ flex-shrink: 0;
698
+ z-index: 1; }
699
+
700
+ .react-autoql-drawer .react-autoql-header-right-container {
701
+ display: flex;
702
+ justify-content: right;
703
+ width: 100px; }
704
+
705
+ .react-autoql-drawer .react-autoql-header-center-container {
706
+ position: relative;
707
+ color: #fff;
708
+ line-height: 60px;
709
+ font-size: 18px;
710
+ letter-spacing: 0.05em;
711
+ font-weight: 600;
712
+ overflow: hidden;
713
+ text-overflow: ellipsis;
714
+ white-space: nowrap; }
715
+
716
+ .react-autoql-drawer .header-title {
717
+ -webkit-animation: fadeIn 0.3s;
718
+ animation: fadeIn 0.3s; }
197
719
 
198
720
  .react-autoql-drawer .react-autoql-header-left-container {
199
721
  width: 100px; }
@@ -599,650 +1121,102 @@
599
1121
  background: var(--react-autoql-background-color-secondary);
600
1122
  color: var(--react-autoql-text-color-primary);
601
1123
  box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
602
- font-weight: bold;
603
- position: relative;
604
- z-index: 2; }
605
-
606
- .page-switcher-container.bottom .tab.active {
607
- background: var(--react-autoql-accent-color);
608
- color: #fff;
609
- font-weight: bold; }
610
-
611
- /* animations */
612
- @-webkit-keyframes response-loading1 {
613
- 0% {
614
- transform: scale(0); }
615
- 100% {
616
- transform: scale(1); } }
617
- @keyframes response-loading1 {
618
- 0% {
619
- transform: scale(0); }
620
- 100% {
621
- transform: scale(1); } }
622
-
623
- @-webkit-keyframes response-loading3 {
624
- 0% {
625
- transform: scale(1); }
626
- 100% {
627
- transform: scale(0); } }
628
-
629
- @keyframes response-loading3 {
630
- 0% {
631
- transform: scale(1); }
632
- 100% {
633
- transform: scale(0); } }
634
-
635
- @-webkit-keyframes response-loading2 {
636
- 0% {
637
- transform: translate(0, 0); }
638
- 100% {
639
- transform: translate(19px, 0); } }
640
-
641
- @keyframes response-loading2 {
642
- 0% {
643
- transform: translate(0, 0); }
644
- 100% {
645
- transform: translate(19px, 0); } }
646
-
647
- @-webkit-keyframes scale-up-center {
648
- 0% {
649
- transform: scale(0); }
650
- 100% {
651
- transform: scale(1); } }
652
-
653
- @keyframes scale-up-center {
654
- 0% {
655
- transform: scale(0); }
656
- 100% {
657
- transform: scale(1); } }
658
-
659
- @-webkit-keyframes fadeIn {
660
- 0% {
661
- opacity: 0; }
662
- 100% {
663
- opacity: 1; } }
664
-
665
- @keyframes fadeIn {
666
- 0% {
667
- opacity: 0; }
668
- 100% {
669
- opacity: 1; } }
670
-
671
- @-webkit-keyframes slideDown {
672
- 0% {
673
- transform: translateY(-100%); }
674
- 100% {
675
- transform: translateY(0%); } }
676
-
677
- @keyframes slideDown {
678
- 0% {
679
- transform: translateY(-100%); }
680
- 100% {
681
- transform: translateY(0%); } }
682
-
683
- @-webkit-keyframes snackbarFadeout {
684
- from {
685
- top: 60px;
686
- opacity: 1; }
687
- to {
688
- top: 30px;
689
- opacity: 0; } }
690
-
691
- @keyframes snackbarFadeout {
692
- from {
693
- top: 60px;
694
- opacity: 1; }
695
- to {
696
- top: 30px;
697
- opacity: 0; } }
698
-
699
- .chat-voice-record-button {
700
- width: 40px;
701
- height: 40px;
702
- border-radius: 24px;
703
- margin: 10px;
704
- margin-left: 0;
705
- font-size: 18px;
706
- line-height: 24px;
707
- outline: none !important;
708
- position: relative;
709
- cursor: pointer;
710
- overflow: hidden;
711
- background: var(--react-autoql-accent-color);
712
- color: white;
713
- border: none;
714
- flex-shrink: 0;
715
- flex-grow: 0; }
716
-
717
- .chat-voice-record-button:hover {
718
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
719
-
720
- .chat-voice-record-button.listening {
721
- background: #ff471a; }
722
-
723
- .chat-voice-record-icon {
724
- vertical-align: top; }
725
-
726
- .react-autoql-tooltip {
727
- font-family: inherit;
728
- letter-spacing: 0.04em;
729
- padding: 7px 15px;
730
- opacity: 1 !important;
731
- z-index: 99999 !important; }
732
-
733
- @-webkit-keyframes slide {
734
- 0% {
735
- transform: translateX(-100%); }
736
- 100% {
737
- transform: translateX(100%); } }
738
-
739
- @keyframes slide {
740
- 0% {
741
- transform: translateX(-100%); }
742
- 100% {
743
- transform: translateX(100%); } }
744
-
745
- @-webkit-keyframes move {
746
- 0% {
747
- left: 0;
748
- opacity: 0; }
749
- 5% {
750
- opacity: 0; }
751
- 48% {
752
- opacity: 0.2; }
753
- 80% {
754
- opacity: 0; }
755
- 100% {
756
- left: 82%; } }
757
-
758
- @keyframes move {
759
- 0% {
760
- left: 0;
761
- opacity: 0; }
762
- 5% {
763
- opacity: 0; }
764
- 48% {
765
- opacity: 0.2; }
766
- 80% {
767
- opacity: 0; }
768
- 100% {
769
- left: 82%; } }
770
-
771
- .react-autoql-dashboard-container {
772
- background: var(--react-autoql-background-color-secondary);
773
- height: 100%;
774
- width: 100%;
775
- overflow: hidden; }
776
-
777
- .react-autoql-dashboard-container.edit-mode {
778
- padding-bottom: 200px; }
779
-
780
- .dashboard-drilldown-modal .ReactModal__Content {
781
- top: unset !important;
782
- margin-top: 20px !important;
783
- max-height: 93vh !important; }
784
-
785
- .dashboard-drilldown-modal .react-autoql-modal-body {
786
- padding: 0; }
787
-
788
- .dashboard-drilldown-modal .react-autoql-table {
789
- opacity: 0.9;
790
- font-size: 11px; }
791
-
792
- .dashboard-drilldown-modal .splitter-layout {
793
- height: calc(100% - 55px); }
794
-
795
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
796
- padding: 20px;
797
- padding-bottom: 10px; }
798
-
799
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
800
- text-align: right;
801
- width: 100%;
802
- padding-right: 20px; }
803
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
804
- position: absolute;
805
- bottom: 5px;
806
- width: 100px;
807
- right: 0; }
808
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
809
- padding-top: 10px;
810
- margin-bottom: -8px; }
811
-
812
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
813
- padding: 20px;
814
- padding-top: 10px;
815
- overflow: hidden;
816
- height: 100%; }
817
-
818
- .empty-dashboard-message-container {
819
- font-family: var(--react-autoql-font-family);
820
- color: var(--react-autoql-text-color-primary);
821
- letter-spacing: 0.02em;
822
- text-align: center;
823
- padding: 100px;
824
- height: 100%;
825
- width: 100%; }
826
-
827
- .empty-dashboard-new-tile-btn {
828
- color: var(--react-autoql-accent-color);
829
- font-weight: bold;
830
- cursor: pointer; }
831
-
832
- .loading-container-centered {
833
- height: 100%;
834
- width: 100%;
835
- display: flex;
836
- flex-direction: column;
837
- justify-content: center;
838
- align-items: center; }
839
-
840
- .response-loading {
841
- display: inline-block;
842
- position: relative;
843
- width: 64px;
844
- height: 64px; }
845
-
846
- .response-loading div {
847
- position: absolute;
848
- top: 27px;
849
- width: 11px;
850
- height: 11px;
851
- border-radius: 50%;
852
- background: #e2e2e2;
853
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
854
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
855
-
856
- .response-loading div:nth-child(1) {
857
- left: 6px;
858
- -webkit-animation: response-loading1 0.6s infinite;
859
- animation: response-loading1 0.6s infinite; }
860
-
861
- .response-loading div:nth-child(2) {
862
- left: 6px;
863
- -webkit-animation: response-loading2 0.6s infinite;
864
- animation: response-loading2 0.6s infinite; }
865
-
866
- .response-loading div:nth-child(3) {
867
- left: 26px;
868
- -webkit-animation: response-loading2 0.6s infinite;
869
- animation: response-loading2 0.6s infinite; }
870
-
871
- .response-loading div:nth-child(4) {
872
- left: 45px;
873
- -webkit-animation: response-loading3 0.6s infinite;
874
- animation: response-loading3 0.6s infinite; }
875
-
876
- .react-autoql-icon {
877
- position: relative;
878
- opacity: 1; }
879
- .react-autoql-icon.warning {
880
- color: var(--react-autoql-warning-color) !important; }
881
- .react-autoql-icon.danger {
882
- color: var(--react-autoql-danger-color) !important; }
883
-
884
- span.react-autoql-icon {
885
- vertical-align: unset;
886
- text-align: left;
887
- margin: 0;
888
- padding: 0;
889
- float: none !important;
890
- color: inherit; }
891
- span.react-autoql-icon svg {
892
- float: none !important;
893
- color: inherit;
894
- vertical-align: unset;
895
- text-align: left;
896
- margin: 0;
897
- padding: 0;
898
- opacity: 1;
899
- height: 1em;
900
- margin-bottom: -0.1em; }
901
-
902
- .slack-logo {
903
- display: inline-block;
904
- height: 100%;
905
- margin-bottom: 3px; }
906
- .slack-logo img {
907
- vertical-align: middle;
908
- height: 1em;
909
- width: 1em; }
910
-
911
- .react-autoql-badge {
912
- position: absolute;
913
- background: var(--react-autoql-warning-color);
914
- border: 1px solid var(--react-autoql-background-color-primary);
915
- width: 0.5em;
916
- height: 0.5em;
917
- top: -0.1em;
918
- right: -0.25em;
919
- border-radius: 50%;
920
- box-sizing: content-box; }
921
-
922
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
923
- .react-autoql-response-content-container:not(.html-content) {
924
- position: relative;
925
- display: flex;
926
- flex-direction: column;
927
- justify-content: center;
928
- align-items: center;
929
- background-color: inherit;
930
- font-size: 14px;
931
- height: 100%;
932
- width: 100%;
933
- overflow: hidden;
934
- color: var(--react-autoql-text-color-primary); }
935
-
936
- .react-autoql-response-content-container.html-content {
937
- position: relative;
938
- background-color: inherit;
939
- text-align: left;
940
- font-size: 14px;
941
- height: 95%;
942
- width: 100%;
943
- overflow: hidden;
944
- color: var(--react-autoql-text-color-primary); }
945
- .react-autoql-response-content-container.html-content table th {
946
- border-bottom: 2px solid var(--react-autoql-border-color); }
947
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
948
- border-bottom: 1px solid var(--react-autoql-border-color); }
949
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
950
- border-right: 1px solid var(--react-autoql-border-color); }
951
- .react-autoql-response-content-container.html-content table th,
952
- .react-autoql-response-content-container.html-content table td {
953
- padding: 5px 10px; }
954
- .react-autoql-response-content-container.html-content * {
955
- font-size: inherit; }
956
- .react-autoql-response-content-container.html-content sup,
957
- .react-autoql-response-content-container.html-content sub {
958
- font-size: 10px; }
959
- .react-autoql-response-content-container.html-content > *:first-child {
960
- margin-top: 0 !important; }
961
- .react-autoql-response-content-container.html-content > *:last-child {
962
- margin-bottom: 0 !important; }
963
- .react-autoql-response-content-container.html-content caption {
964
- display: table-caption;
965
- text-align: -webkit-center;
966
- padding-top: unset;
967
- padding-bottom: unset;
968
- color: unset;
969
- text-align: unset;
970
- caption-side: unset; }
971
-
972
- .react-autoql-response-content-container.table {
973
- max-height: 100vh !important;
974
- overflow-y: scroll;
975
- scrollbar-width: none; }
976
-
977
- .react-autoql-response-content-container.table::-webkit-scrollbar {
978
- width: 0;
979
- height: 0; }
980
-
981
- .react-autoql-suggestion-btn {
982
- padding: 6px 14px;
983
- background: transparent;
984
- font-family: inherit;
985
- font-size: 12px;
986
- margin-bottom: 5px;
987
- outline: none !important;
988
- cursor: pointer;
989
- letter-spacing: 0.05em;
990
- transition: all 0.1s ease;
991
- border: 1px solid rgba(0, 0, 0, 0.15);
992
- border-radius: 5px;
993
- color: inherit; }
994
-
995
- .react-autoql-suggestion-btn:hover {
996
- border-color: transparent;
997
- color: white;
998
- background: var(--react-autoql-accent-color); }
999
-
1000
- .react-autoql-help-link-btn {
1001
- padding: 6px 14px;
1002
- background: transparent;
1003
- border-radius: 5px;
1004
- font-family: inherit;
1005
- font-size: 12px;
1006
- margin-top: 5px;
1007
- outline: none !important;
1008
- cursor: pointer;
1009
- letter-spacing: 0.05em;
1010
- transition: all 0.1s ease;
1011
- border-color: #e2e2e26e;
1012
- color: inherit; }
1013
-
1014
- .react-autoql-help-link-btn:hover {
1015
- opacity: 0.7; }
1016
-
1017
- .react-autoql-help-link-icon {
1018
- width: 15px;
1019
- height: 15px;
1020
- margin-bottom: -3px;
1021
- margin-right: 3px; }
1022
-
1023
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1024
- color: var(--react-autoql-success-color); }
1025
-
1026
- .react-autoql-suggestion-message {
1027
- height: 100%;
1028
- width: 100%;
1029
- word-break: break-word; }
1030
-
1031
- .react-autoql-suggestions-select {
1032
- position: relative;
1033
- display: inline-block;
1034
- height: 30px;
1035
- background: none;
1036
- outline: none !important;
1037
- border: 1px solid;
1038
- font-family: inherit;
1039
- letter-spacing: 0.05em;
1040
- color: #28a8e0;
1041
- cursor: pointer;
1042
- font-size: inherit; }
1043
-
1044
- .no-columns-error-message {
1045
- position: absolute;
1046
- height: 100%;
1047
- width: 100%;
1048
- display: flex;
1049
- justify-content: center;
1050
- flex-direction: column;
1051
- text-align: center;
1052
- padding: 20px;
1053
- font-size: 13px; }
1054
- .no-columns-error-message .warning-icon {
1055
- font-size: 22px;
1056
- display: block;
1057
- margin-bottom: -13px;
1058
- text-align: center; }
1059
- .no-columns-error-message .eye-icon {
1060
- vertical-align: bottom;
1061
- line-height: 18px; }
1062
-
1063
- /* query validation */
1064
- .react-autoql-query-validation-selector-container {
1065
- display: inline-block;
1066
- position: relative; }
1067
-
1068
- .react-autoql-select-popup-container.query-validation-select {
1069
- padding: 5px 0;
1070
- letter-spacing: 0.03em;
1071
- font-family: var(--react-autoql-font-family), sans-serif; }
1072
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1073
- height: unset;
1074
- font-size: 14px;
1075
- line-height: 24px;
1076
- padding: 0 15px; }
1077
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1078
- color: #d84830; }
1079
-
1080
- .react-autoql-query-validation-query {
1081
- text-align: center; }
1082
-
1083
- .react-autoql-query-validation-execute-btn {
1084
- height: 38px;
1085
- background: none;
1086
- border-radius: 4px;
1087
- margin-top: 24px;
1088
- width: 100%;
1089
- color: inherit;
1090
- cursor: pointer;
1091
- outline: none !important;
1092
- border-color: #e2e2e26e;
1093
- transition: all 0.2s ease; }
1094
-
1095
- .react-autoql-query-validation-execute-btn:hover {
1096
- border-color: #28a8e0; }
1097
-
1098
- .react-autoql-execute-query-icon {
1099
- font-size: 16px;
1100
- vertical-align: middle !important;
1101
- padding-right: 3px !important; }
1102
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
1103
- height: 19px;
1104
- width: 19px;
1105
- margin-top: 3px;
1106
- margin-right: 4px;
1107
- vertical-align: top;
1108
- fill: var(--react-autoql-accent-color); }
1109
-
1110
- .react-autoql-query-validation-select {
1111
- position: relative;
1112
- display: inline-block;
1113
- height: 2em;
1114
- background: none;
1115
- outline: none !important;
1116
- border: none;
1117
- letter-spacing: 0.05em;
1118
- font-family: inherit;
1119
- font-size: inherit;
1120
- margin: 0;
1121
- padding: 0;
1122
- border-radius: 0;
1123
- border-bottom: 1px dashed;
1124
- color: var(--react-autoql-accent-color); }
1125
-
1126
- .react-autoql-query-validation-delete-button {
1127
- position: relative;
1128
- cursor: pointer;
1129
- margin-bottom: -2px; }
1130
-
1131
- .react-autoql-chart-tooltip {
1132
- font-family: var(--react-autoql-font-family), sans-serif;
1133
- letter-spacing: 0.04em;
1134
- line-height: 22px;
1135
- font-size: 13px;
1136
- padding: 7px 15px;
1137
- transition: all 0.2s ease !important;
1138
- text-align: left !important;
1139
- opacity: 1 !important;
1140
- z-index: 99999 !important;
1141
- /* necessary to show up on top of rc drawer */ }
1142
-
1143
- .single-value-response {
1144
- color: inherit;
1145
- cursor: unset;
1146
- font-size: 20px; }
1147
- .single-value-response:hover {
1148
- color: inherit; }
1124
+ font-weight: bold;
1125
+ position: relative;
1126
+ z-index: 2; }
1149
1127
 
1150
- .single-value-response.with-drilldown:hover {
1151
- color: inherit;
1152
- text-decoration: underline;
1153
- font-weight: 600;
1154
- cursor: pointer; }
1128
+ .page-switcher-container.bottom .tab.active {
1129
+ background: var(--react-autoql-accent-color);
1130
+ color: #fff;
1131
+ font-weight: bold; }
1155
1132
 
1156
- .react-autoql-query-validation-container {
1157
- width: 100%; }
1133
+ /* animations */
1134
+ @-webkit-keyframes response-loading1 {
1135
+ 0% {
1136
+ transform: scale(0); }
1137
+ 100% {
1138
+ transform: scale(1); } }
1139
+ @keyframes response-loading1 {
1140
+ 0% {
1141
+ transform: scale(0); }
1142
+ 100% {
1143
+ transform: scale(1); } }
1158
1144
 
1159
- .react-autoql-query-validation-description {
1160
- margin-bottom: 14px; }
1145
+ @-webkit-keyframes response-loading3 {
1146
+ 0% {
1147
+ transform: scale(1); }
1148
+ 100% {
1149
+ transform: scale(0); } }
1161
1150
 
1162
- .context-menu {
1163
- background: var(--react-autoql-background-color-primary);
1164
- /* height: 100px; */
1165
- width: 150px;
1166
- padding: 10px 0; }
1151
+ @keyframes response-loading3 {
1152
+ 0% {
1153
+ transform: scale(1); }
1154
+ 100% {
1155
+ transform: scale(0); } }
1167
1156
 
1168
- .context-menu-list {
1169
- list-style-type: none;
1170
- width: 100%;
1171
- margin: 0;
1172
- padding: 0; }
1157
+ @-webkit-keyframes response-loading2 {
1158
+ 0% {
1159
+ transform: translate(0, 0); }
1160
+ 100% {
1161
+ transform: translate(19px, 0); } }
1173
1162
 
1174
- .context-menu-list li {
1175
- color: var(--react-autoql-text-color-primary);
1176
- width: 100%;
1177
- height: 35px;
1178
- line-height: 35px;
1179
- padding: 0 20px;
1180
- cursor: pointer; }
1163
+ @keyframes response-loading2 {
1164
+ 0% {
1165
+ transform: translate(0, 0); }
1166
+ 100% {
1167
+ transform: translate(19px, 0); } }
1181
1168
 
1182
- .context-menu-list li:hover {
1183
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1169
+ @-webkit-keyframes scale-up-center {
1170
+ 0% {
1171
+ transform: scale(0); }
1172
+ 100% {
1173
+ transform: scale(1); } }
1184
1174
 
1185
- .react-autoql-condition-link {
1186
- background: none !important;
1187
- border: none;
1188
- padding: 0 !important;
1189
- text-decoration: none;
1190
- white-space: nowrap;
1191
- cursor: pointer;
1192
- color: var(--react-autoql-accent-color); }
1193
- .react-autoql-condition-link:hover {
1194
- opacity: 0.9; }
1175
+ @keyframes scale-up-center {
1176
+ 0% {
1177
+ transform: scale(0); }
1178
+ 100% {
1179
+ transform: scale(1); } }
1195
1180
 
1196
- .react-autoql-condition-link-filtered {
1197
- text-decoration: none;
1198
- white-space: nowrap;
1199
- cursor: pointer;
1200
- color: var(--react-autoql-accent-color); }
1201
- .react-autoql-condition-link-filtered .react-autoql-custom-icon {
1202
- font-size: 14px;
1203
- vertical-align: middle;
1204
- margin-top: -4px; }
1205
- .react-autoql-condition-link-filtered:hover {
1206
- opacity: 0.9;
1207
- border: none !important; }
1208
- .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
1209
- opacity: 0.9; }
1181
+ @-webkit-keyframes fadeIn {
1182
+ 0% {
1183
+ opacity: 0; }
1184
+ 100% {
1185
+ opacity: 1; } }
1210
1186
 
1211
- .condition-lock-reverse-translation {
1212
- color: var(--react-autoql-text-color-primary);
1213
- background-color: var(--react-autoql-background-color-secondary);
1214
- border-radius: 5px;
1215
- padding: 4px 6px 4px 6px;
1216
- margin: 2px;
1217
- min-height: 26px;
1218
- min-width: 300px; }
1187
+ @keyframes fadeIn {
1188
+ 0% {
1189
+ opacity: 0; }
1190
+ 100% {
1191
+ opacity: 1; } }
1219
1192
 
1220
- .react-autoql-step-container a {
1221
- color: var(--react-autoql-accent-color, #26a7df); }
1193
+ @-webkit-keyframes slideDown {
1194
+ 0% {
1195
+ transform: translateY(-100%); }
1196
+ 100% {
1197
+ transform: translateY(0%); } }
1222
1198
 
1223
- .frequency-date-select-container {
1224
- margin-top: 10px; }
1199
+ @keyframes slideDown {
1200
+ 0% {
1201
+ transform: translateY(-100%); }
1202
+ 100% {
1203
+ transform: translateY(0%); } }
1225
1204
 
1226
- .notification-frequency-step {
1227
- display: flex; }
1228
- .notification-frequency-step .frequency-category-select {
1229
- position: relative;
1230
- padding-top: 9px; }
1231
- .notification-frequency-step .notification-frequency-select {
1232
- margin-left: 8px; }
1233
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1234
- line-height: 33px; }
1235
- .notification-frequency-step .frequency-repeat-follow-text {
1236
- line-height: 32px;
1237
- vertical-align: top; }
1238
- .notification-frequency-step .frequency-settings-container {
1239
- flex: 0 1 400px; }
1205
+ @-webkit-keyframes snackbarFadeout {
1206
+ from {
1207
+ top: 60px;
1208
+ opacity: 1; }
1209
+ to {
1210
+ top: 30px;
1211
+ opacity: 0; } }
1240
1212
 
1241
- .schedule-builder-timezone-section {
1242
- margin: 10px 5px; }
1243
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1244
- display: inline-block;
1245
- width: 300px; }
1213
+ @keyframes snackbarFadeout {
1214
+ from {
1215
+ top: 60px;
1216
+ opacity: 1; }
1217
+ to {
1218
+ top: 30px;
1219
+ opacity: 0; } }
1246
1220
 
1247
1221
  .react-autoql-notifications-button-container {
1248
1222
  position: relative;
@@ -1277,6 +1251,104 @@ span.react-autoql-icon {
1277
1251
  left: 0.5em;
1278
1252
  top: -2px; }
1279
1253
 
1254
+ .notification-list-loading-container {
1255
+ text-align: center;
1256
+ padding-top: 100px;
1257
+ color: var(--react-autoql-text-color-primary);
1258
+ height: 100%;
1259
+ overflow: hidden;
1260
+ background: var(--react-autoql-background-color-secondary); }
1261
+
1262
+ .empty-notifications-message {
1263
+ color: var(--react-autoql-text-color-primary);
1264
+ text-align: center;
1265
+ margin-top: 75px; }
1266
+ .empty-notifications-message div {
1267
+ opacity: 0.6; }
1268
+ .empty-notifications-message .empty-notifications-title {
1269
+ font-size: 16px;
1270
+ font-weight: bold;
1271
+ margin-bottom: 5px; }
1272
+ .empty-notifications-message .empty-notifications-img {
1273
+ width: 250px;
1274
+ height: 250px; }
1275
+
1276
+ .react-autoql-notification-list-container {
1277
+ height: 100%;
1278
+ padding: 20px;
1279
+ overflow-y: auto;
1280
+ background: var(--react-autoql-background-color-secondary); }
1281
+
1282
+ .react-autoql-notification-dismiss-all {
1283
+ text-align: right;
1284
+ margin-bottom: 12px;
1285
+ padding-right: 10px;
1286
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1287
+ transition: color 0.1s ease; }
1288
+ .react-autoql-notification-dismiss-all span {
1289
+ opacity: 0.8;
1290
+ cursor: pointer; }
1291
+ .react-autoql-notification-dismiss-all span:hover {
1292
+ opacity: 1; }
1293
+
1294
+ .react-autoql-notification-display-name-input {
1295
+ width: 100%; }
1296
+
1297
+ .react-autoql-notification-message-input {
1298
+ width: 100%; }
1299
+
1300
+ .react-autoql-notification-list-item:nth-of-type(0) {
1301
+ -webkit-animation-delay: 0s;
1302
+ animation-delay: 0s; }
1303
+
1304
+ .react-autoql-notification-list-item:nth-of-type(1) {
1305
+ -webkit-animation-delay: 0.1s;
1306
+ animation-delay: 0.1s; }
1307
+
1308
+ .react-autoql-notification-list-item:nth-of-type(2) {
1309
+ -webkit-animation-delay: 0.2s;
1310
+ animation-delay: 0.2s; }
1311
+
1312
+ .react-autoql-notification-list-item:nth-of-type(3) {
1313
+ -webkit-animation-delay: 0.3s;
1314
+ animation-delay: 0.3s; }
1315
+
1316
+ .react-autoql-notification-list-item:nth-of-type(4) {
1317
+ -webkit-animation-delay: 0.4s;
1318
+ animation-delay: 0.4s; }
1319
+
1320
+ .react-autoql-notification-list-item:nth-of-type(5) {
1321
+ -webkit-animation-delay: 0.5s;
1322
+ animation-delay: 0.5s; }
1323
+
1324
+ .react-autoql-notification-list-item:nth-of-type(6) {
1325
+ -webkit-animation-delay: 0.6s;
1326
+ animation-delay: 0.6s; }
1327
+
1328
+ .react-autoql-notification-list-item:nth-of-type(7) {
1329
+ -webkit-animation-delay: 0.7s;
1330
+ animation-delay: 0.7s; }
1331
+
1332
+ .react-autoql-notification-list-item:nth-of-type(8) {
1333
+ -webkit-animation-delay: 0.8s;
1334
+ animation-delay: 0.8s; }
1335
+
1336
+ .react-autoql-notification-list-item:nth-of-type(9) {
1337
+ -webkit-animation-delay: 0.9s;
1338
+ animation-delay: 0.9s; }
1339
+
1340
+ .react-autoql-notification-list-item:nth-of-type(10) {
1341
+ -webkit-animation-delay: 1s;
1342
+ animation-delay: 1s; }
1343
+
1344
+ @-webkit-keyframes slideIn {
1345
+ 0% {
1346
+ opacity: 0;
1347
+ top: 500px; }
1348
+ 100% {
1349
+ opacity: 1;
1350
+ top: 0; } }
1351
+
1280
1352
  .react-autoql-notification-list-item {
1281
1353
  display: flex;
1282
1354
  flex-direction: column;
@@ -1494,103 +1566,61 @@ span.react-autoql-icon {
1494
1566
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1495
1567
  margin-bottom: -1px; }
1496
1568
 
1497
- .notification-list-loading-container {
1498
- text-align: center;
1499
- padding-top: 100px;
1500
- color: var(--react-autoql-text-color-primary);
1501
- height: 100%;
1502
- overflow: hidden;
1503
- background: var(--react-autoql-background-color-secondary); }
1504
-
1505
- .empty-notifications-message {
1506
- color: var(--react-autoql-text-color-primary);
1507
- text-align: center;
1508
- margin-top: 75px; }
1509
- .empty-notifications-message div {
1510
- opacity: 0.6; }
1511
- .empty-notifications-message .empty-notifications-title {
1512
- font-size: 16px;
1513
- font-weight: bold;
1514
- margin-bottom: 5px; }
1515
- .empty-notifications-message .empty-notifications-img {
1516
- width: 250px;
1517
- height: 250px; }
1518
-
1519
- .react-autoql-notification-list-container {
1520
- height: 100%;
1521
- padding: 20px;
1522
- overflow-y: auto;
1523
- background: var(--react-autoql-background-color-secondary); }
1569
+ .notification-modal-content .react-autoql-step-content p {
1570
+ margin-bottom: 0.5em;
1571
+ margin-top: 0.5em;
1572
+ padding-left: 8px; }
1524
1573
 
1525
- .react-autoql-notification-dismiss-all {
1574
+ .notification-modal-content .step-btn-container {
1526
1575
  text-align: right;
1527
- margin-bottom: 12px;
1528
- padding-right: 10px;
1529
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1530
- transition: color 0.1s ease; }
1531
- .react-autoql-notification-dismiss-all span {
1532
- opacity: 0.8;
1533
- cursor: pointer; }
1534
- .react-autoql-notification-dismiss-all span:hover {
1535
- opacity: 1; }
1536
-
1537
- .react-autoql-notification-display-name-input {
1538
- width: 100%; }
1539
-
1540
- .react-autoql-notification-message-input {
1541
- width: 100%; }
1542
-
1543
- .react-autoql-notification-list-item:nth-of-type(0) {
1544
- -webkit-animation-delay: 0s;
1545
- animation-delay: 0s; }
1546
-
1547
- .react-autoql-notification-list-item:nth-of-type(1) {
1548
- -webkit-animation-delay: 0.1s;
1549
- animation-delay: 0.1s; }
1550
-
1551
- .react-autoql-notification-list-item:nth-of-type(2) {
1552
- -webkit-animation-delay: 0.2s;
1553
- animation-delay: 0.2s; }
1554
-
1555
- .react-autoql-notification-list-item:nth-of-type(3) {
1556
- -webkit-animation-delay: 0.3s;
1557
- animation-delay: 0.3s; }
1576
+ display: flex;
1577
+ min-height: 50px; }
1558
1578
 
1559
- .react-autoql-notification-list-item:nth-of-type(4) {
1560
- -webkit-animation-delay: 0.4s;
1561
- animation-delay: 0.4s; }
1579
+ .expression-valid-checkmark.react-autoql-icon svg {
1580
+ color: var(--react-autoql-success-color); }
1562
1581
 
1563
- .react-autoql-notification-list-item:nth-of-type(5) {
1564
- -webkit-animation-delay: 0.5s;
1565
- animation-delay: 0.5s; }
1582
+ .expression-invalid-message-container {
1583
+ max-width: 75%;
1584
+ float: left;
1585
+ text-align: left !important;
1586
+ display: flex;
1587
+ flex-direction: row;
1588
+ align-items: left;
1589
+ justify-content: left; }
1566
1590
 
1567
- .react-autoql-notification-list-item:nth-of-type(6) {
1568
- -webkit-animation-delay: 0.6s;
1569
- animation-delay: 0.6s; }
1591
+ .expression-invalid-message {
1592
+ color: var(--react-autoql-danger-color);
1593
+ display: 'inline-block'; }
1570
1594
 
1571
- .react-autoql-notification-list-item:nth-of-type(7) {
1572
- -webkit-animation-delay: 0.7s;
1573
- animation-delay: 0.7s; }
1595
+ .notification-rule-add-btn-outer,
1596
+ .notification-rule-validate-btn-outer {
1597
+ text-align: center;
1598
+ border-style: dashed !important;
1599
+ height: 38px;
1600
+ line-height: 25px;
1601
+ margin: 0 !important;
1602
+ overflow: hidden; }
1574
1603
 
1575
- .react-autoql-notification-list-item:nth-of-type(8) {
1576
- -webkit-animation-delay: 0.8s;
1577
- animation-delay: 0.8s; }
1604
+ .notification-rule-outer-container {
1605
+ position: relative;
1606
+ border: 1px solid transparent;
1607
+ border-radius: 4px; }
1608
+ .notification-rule-outer-container.outlined {
1609
+ border-color: rgba(0, 0, 0, 0.15);
1610
+ padding: 0 20px;
1611
+ padding-bottom: 12px; }
1578
1612
 
1579
- .react-autoql-notification-list-item:nth-of-type(9) {
1580
- -webkit-animation-delay: 0.9s;
1581
- animation-delay: 0.9s; }
1613
+ .notification-outer-all-any {
1614
+ position: absolute;
1615
+ left: 0;
1616
+ top: 50%; }
1582
1617
 
1583
- .react-autoql-notification-list-item:nth-of-type(10) {
1584
- -webkit-animation-delay: 1s;
1585
- animation-delay: 1s; }
1618
+ .notification-first-group-btn-container {
1619
+ display: flex;
1620
+ justify-content: space-between; }
1586
1621
 
1587
- @-webkit-keyframes slideIn {
1588
- 0% {
1589
- opacity: 0;
1590
- top: 500px; }
1591
- 100% {
1592
- opacity: 1;
1593
- top: 0; } }
1622
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1623
+ border: none; }
1594
1624
 
1595
1625
  .react-autoql-notification-settings {
1596
1626
  background-color: var(--react-autoql-background-color-secondary);
@@ -1684,6 +1714,45 @@ span.react-autoql-icon {
1684
1714
  align-items: center;
1685
1715
  margin-top: -25px; }
1686
1716
 
1717
+ .notification-rule-outer-container {
1718
+ position: relative;
1719
+ border: 1px solid transparent;
1720
+ border-radius: 4px;
1721
+ padding-bottom: 5px; }
1722
+
1723
+ .expression-error-message {
1724
+ padding-left: 5px; }
1725
+
1726
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1727
+ border: none; }
1728
+
1729
+ .react-autoql-step-container a {
1730
+ color: var(--react-autoql-accent-color, #26a7df); }
1731
+
1732
+ .frequency-date-select-container {
1733
+ margin-top: 10px; }
1734
+
1735
+ .notification-frequency-step {
1736
+ display: flex; }
1737
+ .notification-frequency-step .frequency-category-select {
1738
+ position: relative;
1739
+ padding-top: 9px; }
1740
+ .notification-frequency-step .notification-frequency-select {
1741
+ margin-left: 8px; }
1742
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1743
+ line-height: 33px; }
1744
+ .notification-frequency-step .frequency-repeat-follow-text {
1745
+ line-height: 32px;
1746
+ vertical-align: top; }
1747
+ .notification-frequency-step .frequency-settings-container {
1748
+ flex: 0 1 400px; }
1749
+
1750
+ .schedule-builder-timezone-section {
1751
+ margin: 10px 5px; }
1752
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1753
+ display: inline-block;
1754
+ width: 300px; }
1755
+
1687
1756
  .react-autoql-dashboard .react-grid-item {
1688
1757
  background: var(--react-autoql-background-color-primary, #fff);
1689
1758
  color: var(--react-autoql-text-color-primary, #404040);
@@ -2163,90 +2232,191 @@ span.react-autoql-icon {
2163
2232
  .react-draggable-transparent-selection input::placeholder {
2164
2233
  color: inherit; }
2165
2234
 
2166
- .dashboard-tile-response-container .layout-pane-primary {
2167
- overflow: hidden; }
2235
+ .dashboard-tile-response-container .layout-pane-primary {
2236
+ overflow: hidden; }
2237
+
2238
+ .splitter-layout,
2239
+ .layout-pane,
2240
+ .dashboard-tile-split-pane-container,
2241
+ .react-autoql-dashboard-drilldown-original {
2242
+ display: flex;
2243
+ align-items: stretch;
2244
+ justify-content: center;
2245
+ width: 100%; }
2246
+
2247
+ .dashboard-tile-response-container .splitter-layout,
2248
+ .dashboard-tile-response-container .layout-pane,
2249
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2250
+ background: inherit; }
2251
+
2252
+ .react-autoql-table-container {
2253
+ height: 100%;
2254
+ max-width: 100%;
2255
+ background-color: inherit; }
2256
+
2257
+ .react-autoql-table {
2258
+ margin-bottom: 0; }
2259
+
2260
+ /* tabulator */
2261
+ .react-autoql-table.tabulator,
2262
+ .react-autoql-table.tabulator .tabulator-row,
2263
+ .react-autoql-table.tabulator .tabulator-header,
2264
+ .react-autoql-table.tabulator .tabulator-headers,
2265
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2266
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2267
+ background-color: inherit; }
2268
+
2269
+ .react-autoql-table-container.supports-drilldown
2270
+ .react-autoql-table.tabulator
2271
+ .tabulator-row.tabulator-unselectable:hover {
2272
+ cursor: pointer !important;
2273
+ background-color: var(--react-autoql-hover-color) !important; }
2274
+
2275
+ .react-autoql-table.tabulator
2276
+ .tabulator-header
2277
+ .tabulator-col.tabulator-sortable:hover {
2278
+ background-color: var(--react-autoql-hover-color) !important; }
2279
+
2280
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2281
+ .react-autoql-table.tabulator .tabulator-cell {
2282
+ border-color: var(--react-autoql-border-color); }
2283
+
2284
+ .react-autoql-table.tabulator .tabulator-header {
2285
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2286
+
2287
+ .react-autoql-table.tabulator {
2288
+ background-color: inherit;
2289
+ height: 100%; }
2290
+
2291
+ .react-autoql-table .tabulator-row {
2292
+ /* user-select: none; This breaks copy/paste */
2293
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2294
+
2295
+ .tabulator-cell:not(:first-child) {
2296
+ border-left: 1px solid !important;
2297
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2298
+
2299
+ .react-autoql-table .tabulator-tableHolder {
2300
+ max-height: calc(100% - 38px) !important;
2301
+ background-color: inherit; }
2302
+
2303
+ .react-autoql-table.tabulator
2304
+ .tabulator-header
2305
+ .tabulator-col
2306
+ .tabulator-col-content {
2307
+ padding: 8px 5px; }
2308
+
2309
+ .react-autoql-table.tabulator
2310
+ .tabulator-header
2311
+ .tabulator-col
2312
+ .tabulator-col-content
2313
+ .tabulator-arrow {
2314
+ opacity: 0;
2315
+ border-left: 4px solid transparent !important;
2316
+ border-right: 4px solid transparent !important;
2317
+ right: 4px;
2318
+ top: calc(50% - 3px); }
2319
+
2320
+ .react-autoql-table.tabulator
2321
+ .tabulator-header
2322
+ .tabulator-col:hover
2323
+ .tabulator-col-content
2324
+ .tabulator-arrow {
2325
+ opacity: 1 !important; }
2168
2326
 
2169
- .splitter-layout,
2170
- .layout-pane,
2171
- .dashboard-tile-split-pane-container,
2172
- .react-autoql-dashboard-drilldown-original {
2173
- display: flex;
2174
- align-items: stretch;
2175
- justify-content: center;
2176
- width: 100%; }
2327
+ .react-autoql-table.tabulator
2328
+ .tabulator-header
2329
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2330
+ .tabulator-col-content
2331
+ .tabulator-arrow {
2332
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2177
2333
 
2178
- .dashboard-tile-response-container .splitter-layout,
2179
- .dashboard-tile-response-container .layout-pane,
2180
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2181
- background: inherit; }
2334
+ .react-autoql-table.tabulator
2335
+ .tabulator-header
2336
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2337
+ .tabulator-col-content
2338
+ .tabulator-arrow,
2339
+ .react-autoql-table.tabulator
2340
+ .tabulator-header
2341
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2342
+ .tabulator-col-content
2343
+ .tabulator-arrow {
2344
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2182
2345
 
2183
- .notification-rule-outer-container {
2184
- position: relative;
2185
- border: 1px solid transparent;
2186
- border-radius: 4px;
2187
- padding-bottom: 5px; }
2346
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2347
+ display: unset;
2348
+ opacity: 0;
2349
+ background-color: transparent;
2350
+ width: 7px;
2351
+ height: 7px;
2352
+ -webkit-transition: all 0.3s ease;
2353
+ transition: all 0.3s ease; }
2188
2354
 
2189
- .expression-error-message {
2190
- padding-left: 5px; }
2355
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2356
+ min-height: calc(100% - 40px) !important;
2357
+ height: calc(100% - 40px) !important;
2358
+ max-height: calc(100% - 40px) !important; }
2191
2359
 
2192
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2193
- border: none; }
2360
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2361
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2362
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2363
+ background-color: transparent; }
2194
2364
 
2195
- .notification-rule-add-btn-outer,
2196
- .notification-rule-validate-btn-outer {
2197
- text-align: center;
2198
- border-style: dashed !important;
2199
- height: 38px;
2200
- line-height: 25px;
2201
- margin: 0 !important;
2202
- overflow: hidden; }
2365
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2366
+ background-color: rgba(0, 0, 0, 0.2);
2367
+ border-radius: 7px;
2368
+ border: 0px; }
2203
2369
 
2204
- .notification-rule-outer-container {
2205
- position: relative;
2206
- border: 1px solid transparent;
2207
- border-radius: 4px; }
2208
- .notification-rule-outer-container.outlined {
2209
- border-color: rgba(0, 0, 0, 0.15);
2210
- padding: 0 20px;
2211
- padding-bottom: 12px; }
2370
+ .react-autoql-table .tabulator-header-filter input {
2371
+ border: 1px solid var(--react-autoql-border-color);
2372
+ border-radius: 4px;
2373
+ background: transparent;
2374
+ padding: 4px 9px !important;
2375
+ outline: none !important; }
2212
2376
 
2213
- .notification-outer-all-any {
2214
- position: absolute;
2215
- left: 0;
2216
- top: 50%; }
2377
+ .react-autoql-table .tabulator-header-filter input:focus {
2378
+ border: 1px solid #28a8e0; }
2217
2379
 
2218
- .notification-first-group-btn-container {
2219
- display: flex;
2220
- justify-content: space-between; }
2380
+ /* These are necessary because we are always rendering the
2381
+ filter (just display: none when not used) instead of re-rendering
2382
+ the whole table when the filter button is clicked */
2383
+ .react-autoql-table-container:not(.filtering)
2384
+ .react-autoql-table
2385
+ .tabulator-header-filter {
2386
+ display: none; }
2221
2387
 
2222
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2223
- border: none; }
2388
+ .react-autoql-table-container:not(.filtering)
2389
+ .react-autoql-table
2390
+ .tabulator-col {
2391
+ height: auto !important; }
2224
2392
 
2225
- .notification-modal-content .react-autoql-step-content p {
2226
- margin-bottom: 0.5em;
2227
- margin-top: 0.5em;
2228
- padding-left: 8px; }
2393
+ .tabulator-table .tabulator-row .tabulator-cell {
2394
+ min-height: 38px; }
2229
2395
 
2230
- .notification-modal-content .step-btn-container {
2231
- text-align: right;
2232
- display: flex;
2233
- min-height: 50px; }
2396
+ /* Center header titles */
2397
+ .react-autoql-table .tabulator-header .tabulator-col {
2398
+ text-align: center !important; }
2234
2399
 
2235
- .expression-valid-checkmark.react-autoql-icon svg {
2236
- color: var(--react-autoql-success-color); }
2400
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2401
+ padding-left: 10px !important;
2402
+ padding-right: 10px !important; }
2237
2403
 
2238
- .expression-invalid-message-container {
2239
- max-width: 75%;
2240
- float: left;
2241
- text-align: left !important;
2242
- display: flex;
2243
- flex-direction: row;
2244
- align-items: left;
2245
- justify-content: left; }
2404
+ .filter-tag {
2405
+ color: #2ecc40;
2406
+ border: 1px solid;
2407
+ padding: 2px 4px;
2408
+ border-radius: 4px;
2409
+ font-weight: 400;
2410
+ font-size: 10px;
2411
+ margin-right: 5px;
2412
+ vertical-align: top;
2413
+ line-height: 21px; }
2246
2414
 
2247
- .expression-invalid-message {
2248
- color: var(--react-autoql-danger-color);
2249
- display: 'inline-block'; }
2415
+ .comparison-value-positive {
2416
+ color: #2ecc40; }
2417
+
2418
+ .comparison-value-negative {
2419
+ color: #e80000; }
2250
2420
 
2251
2421
  .react-autoql-btn {
2252
2422
  border-radius: 4px;
@@ -2265,32 +2435,147 @@ span.react-autoql-icon {
2265
2435
  padding: 2px 8px;
2266
2436
  margin: 2px 3px; }
2267
2437
 
2268
- .react-autoql-btn.large {
2269
- padding: 5px 16px;
2270
- margin: 2px 5px; }
2438
+ .react-autoql-btn.large {
2439
+ padding: 5px 16px;
2440
+ margin: 2px 5px; }
2441
+
2442
+ .react-autoql-btn.default {
2443
+ color: inherit;
2444
+ border: 1px solid var(--react-autoql-border-color);
2445
+ background: inherit; }
2446
+ .react-autoql-btn.default:hover {
2447
+ border-color: var(--react-autoql-accent-color);
2448
+ color: var(--react-autoql-accent-color); }
2449
+
2450
+ .react-autoql-btn.primary {
2451
+ background: var(--react-autoql-accent-color);
2452
+ border: 1px solid var(--react-autoql-accent-color);
2453
+ color: white; }
2454
+ .react-autoql-btn.primary:hover {
2455
+ opacity: 0.8; }
2456
+
2457
+ .react-autoql-btn.danger {
2458
+ color: var(--react-autoql-danger-color, #ca0b00);
2459
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2460
+ background: inherit; }
2461
+ .react-autoql-btn.danger:hover {
2462
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2463
+ color: #fff; }
2464
+
2465
+ .ReactModal__Overlay {
2466
+ background-color: transparent !important;
2467
+ transition: background-color 0.2s ease-in-out;
2468
+ z-index: 9999; }
2469
+
2470
+ .ReactModal__Overlay--after-open {
2471
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2472
+
2473
+ .ReactModal__Overlay--before-close {
2474
+ background-color: transparent !important; }
2475
+
2476
+ .ReactModal__Content {
2477
+ display: flex;
2478
+ flex-direction: column;
2479
+ transform: scale(0);
2480
+ transition: all 0.2s ease-in-out;
2481
+ color: var(--react-autoql-text-color-primary);
2482
+ border: 1px solid var(--react-autoql-border-color) !important;
2483
+ background: var(--react-autoql-background-color-primary) !important;
2484
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2485
+ padding: 0 !important;
2486
+ margin: auto auto;
2487
+ max-width: 90vw;
2488
+ max-height: calc(100vh - 90px); }
2489
+ .ReactModal__Content input.react-autoql-input,
2490
+ .ReactModal__Content textarea.react-autoql-input,
2491
+ .ReactModal__Content textarea {
2492
+ border-color: var(--react-autoql-border-color);
2493
+ color: var(--react-autoql-text-color-primary);
2494
+ background: var(--react-autoql-background-color-primary, white); }
2495
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2496
+ color: var(--react-autoql-text-color-placeholder); }
2497
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2498
+ color: var(--react-autoql-text-color-placeholder); }
2499
+ .ReactModal__Content input.react-autoql-input::placeholder,
2500
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2501
+ .ReactModal__Content textarea::placeholder {
2502
+ color: var(--react-autoql-text-color-placeholder); }
2503
+
2504
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2505
+ transform: scale(1); }
2506
+
2507
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2508
+ transform: scale(0); }
2509
+
2510
+ .react-autoql-modal-header {
2511
+ position: relative;
2512
+ text-align: center;
2513
+ flex: 0 0 52px;
2514
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2515
+ padding: 14px 60px;
2516
+ font-size: 16px; }
2517
+
2518
+ .react-autoql-modal-footer {
2519
+ position: relative;
2520
+ flex: 0 0 52px;
2521
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2522
+ text-align: right;
2523
+ padding: 8px 10px; }
2524
+
2525
+ .react-autoql-modal-body {
2526
+ display: flex;
2527
+ flex-direction: column;
2528
+ padding: 25px;
2529
+ flex: 1;
2530
+ overflow: hidden; }
2531
+ .react-autoql-modal-body h3 {
2532
+ color: var(--react-autoql-text-color-primary); }
2533
+
2534
+ .react-autoql-modal-close-btn {
2535
+ position: absolute !important;
2536
+ top: 10px;
2537
+ right: 18px;
2538
+ font-size: 22px;
2539
+ opacity: 0.6 !important;
2540
+ cursor: pointer; }
2271
2541
 
2272
- .react-autoql-btn.default {
2273
- color: inherit;
2274
- border: 1px solid var(--react-autoql-border-color);
2275
- background: inherit; }
2276
- .react-autoql-btn.default:hover {
2277
- border-color: var(--react-autoql-accent-color);
2278
- color: var(--react-autoql-accent-color); }
2542
+ .react-autoql-modal-close-btn:hover {
2543
+ opacity: 1 !important; }
2279
2544
 
2280
- .react-autoql-btn.primary {
2281
- background: var(--react-autoql-accent-color);
2282
- border: 1px solid var(--react-autoql-accent-color);
2283
- color: white; }
2284
- .react-autoql-btn.primary:hover {
2285
- opacity: 0.8; }
2545
+ .autoql-options-toolbar {
2546
+ position: absolute;
2547
+ background: inherit;
2548
+ padding: 5px;
2549
+ border-radius: 6px;
2550
+ line-height: 28px;
2551
+ background: var(--react-autoql-background-color-primary);
2552
+ border: 1px solid var(--react-autoql-border-color); }
2553
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2554
+ display: block; }
2555
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2556
+ color: var(--react-autoql-accent-color); }
2286
2557
 
2287
- .react-autoql-btn.danger {
2288
- color: var(--react-autoql-danger-color, #ca0b00);
2289
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2290
- background: inherit; }
2291
- .react-autoql-btn.danger:hover {
2292
- background-color: var(--react-autoql-danger-color, #ca0b00);
2293
- color: #fff; }
2558
+ .copy-sql-modal-content {
2559
+ position: relative;
2560
+ height: 60vh; }
2561
+ .copy-sql-modal-content .copy-sql-formatted-text {
2562
+ height: 100%;
2563
+ width: 100%;
2564
+ padding: 10px;
2565
+ resize: none;
2566
+ background: var(--react-autoql-background-color-secondary); }
2567
+ .copy-sql-modal-content .copy-sql-btn {
2568
+ color: var(--react-autoql-text-color);
2569
+ background-color: var(--react-autoql-background-color-primary);
2570
+ position: absolute;
2571
+ top: 3px;
2572
+ right: 0;
2573
+ opacity: 0;
2574
+ transition: opacity 0.3s ease; }
2575
+ .copy-sql-modal-content .sql-copied {
2576
+ color: var(--react-autoql-success-color) !important; }
2577
+ .copy-sql-modal-content:hover .copy-sql-btn {
2578
+ opacity: 1; }
2294
2579
 
2295
2580
  .query-tips-page-container {
2296
2581
  height: 100%;
@@ -2464,6 +2749,60 @@ span.react-autoql-icon {
2464
2749
  100% {
2465
2750
  opacity: 1; } }
2466
2751
 
2752
+ .react-autoql-cascader {
2753
+ position: relative;
2754
+ white-space: nowrap;
2755
+ overflow: hidden;
2756
+ min-width: 300px; }
2757
+ .react-autoql-cascader .options-container {
2758
+ transition: max-width 0.3s ease;
2759
+ display: inline-block;
2760
+ vertical-align: top;
2761
+ padding: 0 10px;
2762
+ margin: 10px 0;
2763
+ width: 100%;
2764
+ max-width: calc(100% - 20px);
2765
+ white-space: pre-wrap; }
2766
+ .react-autoql-cascader .options-container.hidden {
2767
+ max-width: 0; }
2768
+ .react-autoql-cascader .options-container.hidden span {
2769
+ white-space: nowrap; }
2770
+ .react-autoql-cascader .options-container.hidden .option {
2771
+ opacity: 0;
2772
+ pointer-events: none; }
2773
+ .react-autoql-cascader .options-container .options-title {
2774
+ padding: 4px;
2775
+ padding-left: 10px;
2776
+ font-weight: 600; }
2777
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2778
+ position: absolute;
2779
+ cursor: pointer;
2780
+ top: 15px;
2781
+ left: 0; }
2782
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2783
+ opacity: 0.8; }
2784
+ .react-autoql-cascader .options-container .option {
2785
+ cursor: pointer;
2786
+ padding: 4px;
2787
+ display: flex;
2788
+ justify-content: space-between;
2789
+ border-radius: 2px;
2790
+ padding-left: 10px; }
2791
+ .react-autoql-cascader .options-container .option .option-arrow {
2792
+ opacity: 0.7; }
2793
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2794
+ opacity: 0;
2795
+ color: #fff;
2796
+ font-size: 16px;
2797
+ vertical-align: middle; }
2798
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2799
+ background-color: var(--react-autoql-accent-color, #26a7df);
2800
+ color: #fff; }
2801
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2802
+ opacity: 1; }
2803
+ .react-autoql-cascader .options-container:not(:last-child) {
2804
+ border-right: 1px solid #d3d3d352; }
2805
+
2467
2806
  .chat-single-message-container {
2468
2807
  transition: background-color 0.2s ease;
2469
2808
  padding-top: 6px; }
@@ -2683,143 +3022,9 @@ so we dont have to redraw the whole table */
2683
3022
  0% {
2684
3023
  transform: scale(0.5);
2685
3024
  transform-origin: 0% 100%; }
2686
- 100% {
2687
- transform: scale(1);
2688
- transform-origin: 0% 100%; } }
2689
-
2690
- .ReactModal__Overlay {
2691
- background-color: transparent !important;
2692
- transition: background-color 0.2s ease-in-out;
2693
- z-index: 9999; }
2694
-
2695
- .ReactModal__Overlay--after-open {
2696
- background-color: rgba(0, 0, 0, 0.25) !important; }
2697
-
2698
- .ReactModal__Overlay--before-close {
2699
- background-color: transparent !important; }
2700
-
2701
- .ReactModal__Content {
2702
- display: flex;
2703
- flex-direction: column;
2704
- transform: scale(0);
2705
- transition: all 0.2s ease-in-out;
2706
- color: var(--react-autoql-text-color-primary);
2707
- border: 1px solid var(--react-autoql-border-color) !important;
2708
- background: var(--react-autoql-background-color-primary) !important;
2709
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2710
- padding: 0 !important;
2711
- margin: auto auto;
2712
- max-width: 90vw;
2713
- max-height: calc(100vh - 90px); }
2714
- .ReactModal__Content input.react-autoql-input,
2715
- .ReactModal__Content textarea.react-autoql-input,
2716
- .ReactModal__Content textarea {
2717
- border-color: var(--react-autoql-border-color);
2718
- color: var(--react-autoql-text-color-primary);
2719
- background: var(--react-autoql-background-color-primary, white); }
2720
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2721
- color: var(--react-autoql-text-color-placeholder); }
2722
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2723
- color: var(--react-autoql-text-color-placeholder); }
2724
- .ReactModal__Content input.react-autoql-input::placeholder,
2725
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2726
- .ReactModal__Content textarea::placeholder {
2727
- color: var(--react-autoql-text-color-placeholder); }
2728
-
2729
- .ReactModal__Overlay--after-open .ReactModal__Content {
2730
- transform: scale(1); }
2731
-
2732
- .ReactModal__Overlay--before-close .ReactModal__Content {
2733
- transform: scale(0); }
2734
-
2735
- .react-autoql-modal-header {
2736
- position: relative;
2737
- text-align: center;
2738
- flex: 0 0 52px;
2739
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2740
- padding: 14px 60px;
2741
- font-size: 16px; }
2742
-
2743
- .react-autoql-modal-footer {
2744
- position: relative;
2745
- flex: 0 0 52px;
2746
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2747
- text-align: right;
2748
- padding: 8px 10px; }
2749
-
2750
- .react-autoql-modal-body {
2751
- display: flex;
2752
- flex-direction: column;
2753
- padding: 25px;
2754
- flex: 1;
2755
- overflow: hidden; }
2756
- .react-autoql-modal-body h3 {
2757
- color: var(--react-autoql-text-color-primary); }
2758
-
2759
- .react-autoql-modal-close-btn {
2760
- position: absolute !important;
2761
- top: 10px;
2762
- right: 18px;
2763
- font-size: 22px;
2764
- opacity: 0.6 !important;
2765
- cursor: pointer; }
2766
-
2767
- .react-autoql-modal-close-btn:hover {
2768
- opacity: 1 !important; }
2769
-
2770
- .react-autoql-cascader {
2771
- position: relative;
2772
- white-space: nowrap;
2773
- overflow: hidden;
2774
- min-width: 300px; }
2775
- .react-autoql-cascader .options-container {
2776
- transition: max-width 0.3s ease;
2777
- display: inline-block;
2778
- vertical-align: top;
2779
- padding: 0 10px;
2780
- margin: 10px 0;
2781
- width: 100%;
2782
- max-width: calc(100% - 20px);
2783
- white-space: pre-wrap; }
2784
- .react-autoql-cascader .options-container.hidden {
2785
- max-width: 0; }
2786
- .react-autoql-cascader .options-container.hidden span {
2787
- white-space: nowrap; }
2788
- .react-autoql-cascader .options-container.hidden .option {
2789
- opacity: 0;
2790
- pointer-events: none; }
2791
- .react-autoql-cascader .options-container .options-title {
2792
- padding: 4px;
2793
- padding-left: 10px;
2794
- font-weight: 600; }
2795
- .react-autoql-cascader .options-container .cascader-back-arrow {
2796
- position: absolute;
2797
- cursor: pointer;
2798
- top: 15px;
2799
- left: 0; }
2800
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2801
- opacity: 0.8; }
2802
- .react-autoql-cascader .options-container .option {
2803
- cursor: pointer;
2804
- padding: 4px;
2805
- display: flex;
2806
- justify-content: space-between;
2807
- border-radius: 2px;
2808
- padding-left: 10px; }
2809
- .react-autoql-cascader .options-container .option .option-arrow {
2810
- opacity: 0.7; }
2811
- .react-autoql-cascader .options-container .option .option-execute-icon {
2812
- opacity: 0;
2813
- color: #fff;
2814
- font-size: 16px;
2815
- vertical-align: middle; }
2816
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2817
- background-color: var(--react-autoql-accent-color, #26a7df);
2818
- color: #fff; }
2819
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2820
- opacity: 1; }
2821
- .react-autoql-cascader .options-container:not(:last-child) {
2822
- border-right: 1px solid #d3d3d352; }
3025
+ 100% {
3026
+ transform: scale(1);
3027
+ transform-origin: 0% 100%; } }
2823
3028
 
2824
3029
  .react-autoql-filter-locking-title-container {
2825
3030
  display: inline-block;
@@ -2830,7 +3035,10 @@ so we dont have to redraw the whole table */
2830
3035
  width: 95%;
2831
3036
  float: left;
2832
3037
  color: var(--react-autoql-text-color-primary);
2833
- margin-bottom: 0; }
3038
+ margin-bottom: 0;
3039
+ display: block;
3040
+ font-size: 1.17em !important;
3041
+ font-weight: bold; }
2834
3042
  .react-autoql-filter-locking-title-container h3 span {
2835
3043
  color: var(--react-autoql-accent-color); }
2836
3044
  .react-autoql-filter-locking-title-container button {
@@ -2873,28 +3081,34 @@ so we dont have to redraw the whole table */
2873
3081
  font-family: inherit;
2874
3082
  /* Default styles outside of data messenger */
2875
3083
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2876
- background: var(--react-autoql-background-color-primary);
2877
- color: #5d5d5d; }
3084
+ background: var(--react-autoql-background-color-secondary);
3085
+ color: var(--react-autoql-text-color-primary); }
3086
+ .react-autoql-condition-locking-input::-moz-placeholder {
3087
+ color: var(--react-autoql-text-color-placeholder) !important; }
3088
+ .react-autoql-condition-locking-input:-ms-input-placeholder {
3089
+ color: var(--react-autoql-text-color-placeholder) !important; }
3090
+ .react-autoql-condition-locking-input::placeholder {
3091
+ color: var(--react-autoql-text-color-placeholder) !important; }
2878
3092
 
2879
3093
  .react-autoql-condition-locking-input:hover {
2880
3094
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2881
3095
 
2882
- .condition-table {
3096
+ .react-autoql-condition-table {
2883
3097
  min-width: 95%;
2884
3098
  margin: 10px auto; }
2885
3099
 
2886
- .condition-table thead {
3100
+ .react-autoql-condition-table thead {
2887
3101
  padding-left: 10px; }
2888
3102
 
2889
- .condition-table th {
3103
+ .react-autoql-condition-table th {
2890
3104
  text-align: left;
2891
3105
  padding: 4px;
2892
3106
  margin: 0 10px 0 10px;
2893
3107
  font-weight: 800; }
2894
- .condition-table th span {
3108
+ .react-autoql-condition-table th span {
2895
3109
  color: var(--react-autoql-accent-color); }
2896
3110
 
2897
- .condition-table .condition-table-list-item {
3111
+ .react-autoql-condition-table .react-autoql-condition-table-list-item {
2898
3112
  text-overflow: ellipsis;
2899
3113
  white-space: nowrap;
2900
3114
  overflow: hidden; }
@@ -2925,25 +3139,19 @@ so we dont have to redraw the whole table */
2925
3139
  .react-autoql-accept-conditions-button span:hover {
2926
3140
  opacity: 1; }
2927
3141
 
2928
- .condition-table tr {
2929
- cursor: pointer; }
2930
- .condition-table tr:hover {
2931
- background: var(--react-autoql-accent-color);
2932
- color: white; }
2933
-
2934
- .condition-table td {
3142
+ .react-autoql-condition-table td {
2935
3143
  text-align: left;
2936
3144
  padding: 4px;
2937
3145
  margin: 0 10px 0 10px;
2938
3146
  padding-left: 10px; }
2939
3147
 
2940
- .condition-list {
3148
+ .react-autoql-condition-list {
2941
3149
  padding: 0;
2942
3150
  margin: 0 auto;
2943
3151
  overflow-y: scroll;
2944
3152
  min-height: 182px; }
2945
3153
 
2946
- .condition-list-loading-container {
3154
+ .react-autoql-condition-list-loading-container {
2947
3155
  display: flex;
2948
3156
  height: 180px;
2949
3157
  width: 100%;
@@ -2951,23 +3159,11 @@ so we dont have to redraw the whole table */
2951
3159
  align-items: center;
2952
3160
  justify-content: center; }
2953
3161
 
2954
- .condition-list-item {
2955
- cursor: pointer;
2956
- padding: 4px;
2957
- margin: 0 10px 0 10px;
2958
- display: flex;
2959
- justify-content: space-between;
2960
- border-radius: 2px;
2961
- padding-left: 10px; }
2962
- .condition-list-item:hover {
2963
- background: var(--react-autoql-accent-color);
2964
- color: white; }
2965
-
2966
- .empty-condition-list {
3162
+ .react-autoql-empty-condition-list {
2967
3163
  text-align: center;
2968
3164
  padding: 20px;
2969
3165
  height: 140px; }
2970
- .empty-condition-list p {
3166
+ .react-autoql-empty-condition-list p {
2971
3167
  margin-top: 20px !important;
2972
3168
  vertical-align: middle; }
2973
3169
 
@@ -3019,315 +3215,111 @@ so we dont have to redraw the whole table */
3019
3215
  table-layout: fixed;
3020
3216
  width: 100%; }
3021
3217
 
3022
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3023
- color: var(--react-autoql-text-color-primary); }
3024
-
3025
- .autoql-condition-locking-menu-container input::-moz-placeholder {
3026
- opacity: 0.5; }
3027
-
3028
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3029
- opacity: 0.5; }
3030
-
3031
- .autoql-condition-locking-menu-container input::placeholder {
3032
- opacity: 0.5; }
3033
-
3034
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3035
- margin: 0;
3036
- padding: 0;
3037
- list-style-type: none; }
3038
-
3039
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3040
- cursor: pointer;
3041
- padding: 2px;
3042
- padding-left: 18px;
3043
- letter-spacing: 0.05em;
3044
- line-height: 22.5px; }
3045
-
3046
- .autoql-condition-locking-menu-container
3047
- .react-autosuggest__suggestion--highlighted {
3048
- background-color: rgba(0, 0, 0, 0.1) !important; }
3049
-
3050
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3051
- padding: 10px 0 0 10px;
3052
- font-size: 12px;
3053
- color: #777; }
3054
-
3055
- .react-autoql-filter-setting-info-card {
3056
- color: var(--react-autoql-text-color-primary);
3057
- background-color: var(--react-autoql-background-color-secondary);
3058
- border-radius: 5px;
3059
- padding: 2px 6px 2px 6px;
3060
- margin: 4px 10px 4px 10px;
3061
- display: inline-block;
3062
- position: absolute;
3063
- top: 40px;
3064
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3065
- z-index: 9999; }
3066
- .react-autoql-filter-setting-info-card span {
3067
- color: var(--react-autoql-accent-color); }
3068
- .react-autoql-filter-setting-info-card p {
3069
- margin-bottom: 0 !important; }
3070
- .react-autoql-filter-setting-info-card p span {
3071
- color: var(--react-autoql-accent-color); }
3072
-
3073
- #react-autoql-condition-show-message {
3074
- visibility: hidden;
3075
- min-width: 200px;
3076
- line-height: 1 !important;
3077
- font-size: 14px !important;
3078
- background-color: var(--react-autoql-background-color-secondary);
3079
- text-align: center;
3080
- border-radius: 4px;
3081
- padding: 6px;
3082
- position: fixed;
3083
- top: 20px;
3084
- display: block;
3085
- z-index: 999999999;
3086
- transform: translateX(85%);
3087
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3088
- #react-autoql-condition-show-message span {
3089
- color: var(--react-autoql-accent-color); }
3090
-
3091
- #react-autoql-condition-show-message.show {
3092
- visibility: visible;
3093
- -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3094
- animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3095
-
3096
- @-webkit-keyframes snackbarFadein {
3097
- from {
3098
- top: 0;
3099
- opacity: 0; }
3100
- to {
3101
- top: 20px;
3102
- opacity: 1; } }
3103
-
3104
- @keyframes snackbarFadein {
3105
- from {
3106
- top: 0;
3107
- opacity: 0; }
3108
- to {
3109
- top: 20px;
3110
- opacity: 1; } }
3111
-
3112
- @-webkit-keyframes snackbarFadeout {
3113
- from {
3114
- top: 20px;
3115
- opacity: 1; }
3116
- to {
3117
- top: 0;
3118
- opacity: 0; } }
3119
-
3120
- @keyframes snackbarFadeout {
3121
- from {
3122
- top: 20px;
3123
- opacity: 1; }
3124
- to {
3125
- top: 0;
3126
- opacity: 0; } }
3127
-
3128
- .react-autoql-table-container {
3129
- height: 100%;
3130
- max-width: 100%;
3131
- background-color: inherit; }
3132
-
3133
- .react-autoql-table {
3134
- margin-bottom: 0; }
3135
-
3136
- /* tabulator */
3137
- .react-autoql-table.tabulator,
3138
- .react-autoql-table.tabulator .tabulator-row,
3139
- .react-autoql-table.tabulator .tabulator-header,
3140
- .react-autoql-table.tabulator .tabulator-headers,
3141
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3142
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
3143
- background-color: inherit; }
3144
-
3145
- .react-autoql-table-container.supports-drilldown
3146
- .react-autoql-table.tabulator
3147
- .tabulator-row.tabulator-unselectable:hover {
3148
- cursor: pointer !important;
3149
- background-color: var(--react-autoql-hover-color) !important; }
3150
-
3151
- .react-autoql-table.tabulator
3152
- .tabulator-header
3153
- .tabulator-col.tabulator-sortable:hover {
3154
- background-color: var(--react-autoql-hover-color) !important; }
3155
-
3156
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3157
- .react-autoql-table.tabulator .tabulator-cell {
3158
- border-color: var(--react-autoql-border-color); }
3159
-
3160
- .react-autoql-table.tabulator .tabulator-header {
3161
- border-bottom: 2px solid var(--react-autoql-border-color); }
3162
-
3163
- .react-autoql-table.tabulator {
3164
- background-color: inherit;
3165
- height: 100%; }
3166
-
3167
- .react-autoql-table .tabulator-row {
3168
- /* user-select: none; This breaks copy/paste */
3169
- border-bottom: 1px solid var(--react-autoql-border-color); }
3170
-
3171
- .tabulator-cell:not(:first-child) {
3172
- border-left: 1px solid !important;
3173
- border-color: rgba(0, 0, 0, 0.06) !important; }
3174
-
3175
- .react-autoql-table .tabulator-tableHolder {
3176
- max-height: calc(100% - 38px) !important;
3177
- background-color: inherit; }
3178
-
3179
- .react-autoql-table.tabulator
3180
- .tabulator-header
3181
- .tabulator-col
3182
- .tabulator-col-content {
3183
- padding: 8px 5px; }
3184
-
3185
- .react-autoql-table.tabulator
3186
- .tabulator-header
3187
- .tabulator-col
3188
- .tabulator-col-content
3189
- .tabulator-arrow {
3190
- opacity: 0;
3191
- border-left: 4px solid transparent !important;
3192
- border-right: 4px solid transparent !important;
3193
- right: 4px;
3194
- top: calc(50% - 3px); }
3195
-
3196
- .react-autoql-table.tabulator
3197
- .tabulator-header
3198
- .tabulator-col:hover
3199
- .tabulator-col-content
3200
- .tabulator-arrow {
3201
- opacity: 1 !important; }
3202
-
3203
- .react-autoql-table.tabulator
3204
- .tabulator-header
3205
- .tabulator-col.tabulator-sortable[aria-sort='desc']
3206
- .tabulator-col-content
3207
- .tabulator-arrow {
3208
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
3209
-
3210
- .react-autoql-table.tabulator
3211
- .tabulator-header
3212
- .tabulator-col.tabulator-sortable[aria-sort='asc']
3213
- .tabulator-col-content
3214
- .tabulator-arrow,
3215
- .react-autoql-table.tabulator
3216
- .tabulator-header
3217
- .tabulator-col.tabulator-sortable[aria-sort='none']
3218
- .tabulator-col-content
3219
- .tabulator-arrow {
3220
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
3221
-
3222
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
3223
- display: unset;
3224
- opacity: 0;
3225
- background-color: transparent;
3226
- width: 7px;
3227
- height: 7px;
3228
- -webkit-transition: all 0.3s ease;
3229
- transition: all 0.3s ease; }
3230
-
3231
- .react-autoql-table.tabulator .tabulator-tableHolder {
3232
- min-height: calc(100% - 40px) !important;
3233
- height: calc(100% - 40px) !important;
3234
- max-height: calc(100% - 40px) !important; }
3235
-
3236
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3237
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3238
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3239
- background-color: transparent; }
3240
-
3241
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3242
- background-color: rgba(0, 0, 0, 0.2);
3243
- border-radius: 7px;
3244
- border: 0px; }
3245
-
3246
- .react-autoql-table .tabulator-header-filter input {
3247
- border: 1px solid var(--react-autoql-border-color);
3248
- border-radius: 4px;
3249
- background: transparent;
3250
- padding: 4px 9px !important;
3251
- outline: none !important; }
3252
-
3253
- .react-autoql-table .tabulator-header-filter input:focus {
3254
- border: 1px solid #28a8e0; }
3255
-
3256
- /* These are necessary because we are always rendering the
3257
- filter (just display: none when not used) instead of re-rendering
3258
- the whole table when the filter button is clicked */
3259
- .react-autoql-table-container:not(.filtering)
3260
- .react-autoql-table
3261
- .tabulator-header-filter {
3262
- display: none; }
3218
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3219
+ color: var(--react-autoql-text-color-primary); }
3263
3220
 
3264
- .react-autoql-table-container:not(.filtering)
3265
- .react-autoql-table
3266
- .tabulator-col {
3267
- height: auto !important; }
3221
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3222
+ opacity: 0.5; }
3268
3223
 
3269
- .tabulator-table .tabulator-row .tabulator-cell {
3270
- min-height: 38px; }
3224
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3225
+ opacity: 0.5; }
3271
3226
 
3272
- /* Center header titles */
3273
- .react-autoql-table .tabulator-header .tabulator-col {
3274
- text-align: center !important; }
3227
+ .autoql-condition-locking-menu-container input::placeholder {
3228
+ opacity: 0.5; }
3275
3229
 
3276
- .react-autoql-table .tabulator-header .tabulator-col-title {
3277
- padding-left: 10px !important;
3278
- padding-right: 10px !important; }
3230
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3231
+ margin: 0;
3232
+ padding: 0;
3233
+ list-style-type: none; }
3279
3234
 
3280
- .filter-tag {
3281
- color: #2ecc40;
3282
- border: 1px solid;
3283
- padding: 2px 4px;
3284
- border-radius: 4px;
3285
- font-weight: 400;
3286
- font-size: 10px;
3287
- margin-right: 5px;
3288
- vertical-align: top;
3289
- line-height: 21px; }
3235
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3236
+ cursor: pointer;
3237
+ padding: 2px;
3238
+ padding-left: 18px;
3239
+ letter-spacing: 0.05em;
3240
+ line-height: 22.5px; }
3290
3241
 
3291
- .comparison-value-positive {
3292
- color: #2ecc40; }
3242
+ .autoql-condition-locking-menu-container
3243
+ .react-autosuggest__suggestion--highlighted {
3244
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3293
3245
 
3294
- .comparison-value-negative {
3295
- color: #e80000; }
3246
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3247
+ padding: 10px 0 0 10px;
3248
+ font-size: 12px;
3249
+ color: #777; }
3296
3250
 
3297
- .autoql-options-toolbar {
3251
+ .react-autoql-filter-setting-info-card {
3252
+ color: var(--react-autoql-text-color-primary);
3253
+ background-color: var(--react-autoql-background-color-secondary);
3254
+ border-radius: 5px;
3255
+ padding: 2px 6px 2px 6px;
3256
+ margin: 4px 10px 4px 10px;
3257
+ display: inline-block;
3298
3258
  position: absolute;
3299
- background: inherit;
3300
- padding: 5px;
3301
- border-radius: 6px;
3302
- line-height: 28px;
3303
- background: var(--react-autoql-background-color-primary);
3304
- border: 1px solid var(--react-autoql-border-color); }
3305
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3306
- display: block; }
3307
- .autoql-options-toolbar .react-autoql-toolbar-btn {
3259
+ top: 40px;
3260
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3261
+ z-index: 9999; }
3262
+ .react-autoql-filter-setting-info-card span {
3308
3263
  color: var(--react-autoql-accent-color); }
3264
+ .react-autoql-filter-setting-info-card p {
3265
+ margin-bottom: 0 !important; }
3266
+ .react-autoql-filter-setting-info-card p span {
3267
+ color: var(--react-autoql-accent-color); }
3309
3268
 
3310
- .copy-sql-modal-content {
3311
- position: relative;
3312
- height: 60vh; }
3313
- .copy-sql-modal-content .copy-sql-formatted-text {
3314
- height: 100%;
3315
- width: 100%;
3316
- padding: 10px;
3317
- resize: none;
3318
- background: var(--react-autoql-background-color-secondary); }
3319
- .copy-sql-modal-content .copy-sql-btn {
3320
- color: var(--react-autoql-text-color);
3321
- background-color: var(--react-autoql-background-color-primary);
3322
- position: absolute;
3323
- top: 3px;
3324
- right: 0;
3325
- opacity: 0;
3326
- transition: opacity 0.3s ease; }
3327
- .copy-sql-modal-content .sql-copied {
3328
- color: var(--react-autoql-success-color) !important; }
3329
- .copy-sql-modal-content:hover .copy-sql-btn {
3269
+ #react-autoql-condition-show-message {
3270
+ visibility: hidden;
3271
+ min-width: 200px;
3272
+ line-height: 1 !important;
3273
+ font-size: 14px !important;
3274
+ background-color: var(--react-autoql-background-color-secondary);
3275
+ text-align: center;
3276
+ border-radius: 4px;
3277
+ padding: 6px;
3278
+ position: fixed;
3279
+ top: 20px;
3280
+ display: block;
3281
+ z-index: 999999999;
3282
+ transform: translateX(85%);
3283
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3284
+ #react-autoql-condition-show-message span {
3285
+ color: var(--react-autoql-accent-color); }
3286
+
3287
+ #react-autoql-condition-show-message.show {
3288
+ visibility: visible;
3289
+ -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3290
+ animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3291
+
3292
+ @-webkit-keyframes snackbarFadein {
3293
+ from {
3294
+ top: 0;
3295
+ opacity: 0; }
3296
+ to {
3297
+ top: 20px;
3298
+ opacity: 1; } }
3299
+
3300
+ @keyframes snackbarFadein {
3301
+ from {
3302
+ top: 0;
3303
+ opacity: 0; }
3304
+ to {
3305
+ top: 20px;
3306
+ opacity: 1; } }
3307
+
3308
+ @-webkit-keyframes snackbarFadeout {
3309
+ from {
3310
+ top: 20px;
3311
+ opacity: 1; }
3312
+ to {
3313
+ top: 0;
3314
+ opacity: 0; } }
3315
+
3316
+ @keyframes snackbarFadeout {
3317
+ from {
3318
+ top: 20px;
3330
3319
  opacity: 1; }
3320
+ to {
3321
+ top: 0;
3322
+ opacity: 0; } }
3331
3323
 
3332
3324
  .react-autoql-chart-container {
3333
3325
  position: relative;
@@ -3424,9 +3416,130 @@ the whole table when the filter button is clicked */
3424
3416
  .axis-selector-container .axis-selector-content li:hover {
3425
3417
  background: rgba(0, 0, 0, 0.05); }
3426
3418
 
3427
- .axis-selector-apply-btn {
3428
- background: var(--react-autoql-background-color-primary);
3429
- padding: 5px; }
3419
+ .axis-selector-apply-btn {
3420
+ background: var(--react-autoql-background-color-primary);
3421
+ padding: 5px; }
3422
+
3423
+
3424
+ .react-autoql-input-container {
3425
+ position: relative;
3426
+ margin: 2px 5px;
3427
+ display: inline-block; }
3428
+ .react-autoql-input-container .react-autoql-input {
3429
+ border: 1px solid rgba(0, 0, 0, 0.1);
3430
+ border-radius: 4px;
3431
+ line-height: 32px;
3432
+ min-height: 34px;
3433
+ padding: 0 10px;
3434
+ width: 100%;
3435
+ outline: none !important;
3436
+ transition: all 0.2s ease;
3437
+ transition-property: border-color, color, opacity; }
3438
+ .react-autoql-input-container .react-autoql-input.with-icon {
3439
+ padding-left: 38px; }
3440
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3441
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3442
+ color: rgba(0, 0, 0, 0.2);
3443
+ opacity: 1;
3444
+ /* Firefox */
3445
+ font-style: italic; }
3446
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3447
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3448
+ color: rgba(0, 0, 0, 0.2);
3449
+ opacity: 1;
3450
+ /* Firefox */
3451
+ font-style: italic; }
3452
+ .react-autoql-input-container .react-autoql-input::placeholder {
3453
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3454
+ color: rgba(0, 0, 0, 0.2);
3455
+ opacity: 1;
3456
+ /* Firefox */
3457
+ font-style: italic; }
3458
+ .react-autoql-input-container .react-autoql-input-icon {
3459
+ position: absolute;
3460
+ left: 12px;
3461
+ top: 8px;
3462
+ opacity: 0.4;
3463
+ transition: all 0.2s ease; }
3464
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3465
+ height: 17px;
3466
+ width: 17px; }
3467
+ .react-autoql-input-container:hover .react-autoql-input,
3468
+ .react-autoql-input-container .react-autoql-input:focus {
3469
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3470
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3471
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3472
+ opacity: 1;
3473
+ color: var(--react-autoql-accent-color, #26a7df); }
3474
+
3475
+ .react-autoql-steps-container {
3476
+ margin: 10px; }
3477
+
3478
+ .react-autoql-step-container {
3479
+ position: relative;
3480
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3481
+ margin-left: 12px;
3482
+ padding-left: 20px;
3483
+ padding-bottom: 5px;
3484
+ transition: all 0.5s ease; }
3485
+ .react-autoql-step-container.complete {
3486
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3487
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3488
+ border-color: var(--react-autoql-accent-color, #26a7df);
3489
+ background: var(--react-autoql-accent-color, #26a7df);
3490
+ color: #fff; }
3491
+ .react-autoql-step-container.error {
3492
+ border-color: var(--react-autoql-warning-color); }
3493
+ .react-autoql-step-container.error .react-autoql-step-dot {
3494
+ border-color: var(--react-autoql-warning-color);
3495
+ background: var(--react-autoql-warning-color);
3496
+ color: white; }
3497
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3498
+ pointer-events: none;
3499
+ height: 10px;
3500
+ opacity: 0;
3501
+ margin: 0; }
3502
+
3503
+ .react-autoql-step-dot {
3504
+ position: absolute;
3505
+ top: 0;
3506
+ left: -10px;
3507
+ height: 20px;
3508
+ width: 20px;
3509
+ border-radius: 15px;
3510
+ background: var(--react-autoql-background-color-primary, #fff);
3511
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3512
+ transition: all 0.5s ease;
3513
+ font-size: 10.5px;
3514
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3515
+ text-align: center; }
3516
+
3517
+ .react-autoql-step-title-container:hover {
3518
+ cursor: pointer;
3519
+ transition: color 0.2s ease;
3520
+ color: var(--react-autoql-accent-color, #26a7df); }
3521
+
3522
+ .react-autoql-step-title {
3523
+ font-weight: 500;
3524
+ font-size: 15px;
3525
+ line-height: 15px;
3526
+ padding-top: 2px; }
3527
+
3528
+ .react-autoql-step-subtitle {
3529
+ font-size: 13px;
3530
+ padding-top: 6px;
3531
+ padding-bottom: 6px;
3532
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3533
+
3534
+ .react-autoql-step-content {
3535
+ margin: 15px;
3536
+ margin-top: 0; }
3537
+
3538
+ .react-autoql-step-content-container {
3539
+ transition-timing-function: ease;
3540
+ transition-property: height, opacity, margin;
3541
+ transition-duration: 0.5s;
3542
+ opacity: 1; }
3430
3543
 
3431
3544
  .viz-toolbar {
3432
3545
  position: absolute;
@@ -3662,180 +3775,6 @@ the whole table when the filter button is clicked */
3662
3775
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3663
3776
  background: var(--react-autoql-accent-color); }
3664
3777
 
3665
-
3666
- .react-autoql-steps-container {
3667
- margin: 10px; }
3668
-
3669
- .react-autoql-step-container {
3670
- position: relative;
3671
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3672
- margin-left: 12px;
3673
- padding-left: 20px;
3674
- padding-bottom: 5px;
3675
- transition: all 0.5s ease; }
3676
- .react-autoql-step-container.complete {
3677
- border-color: var(--react-autoql-accent-color, #26a7df); }
3678
- .react-autoql-step-container.complete .react-autoql-step-dot {
3679
- border-color: var(--react-autoql-accent-color, #26a7df);
3680
- background: var(--react-autoql-accent-color, #26a7df);
3681
- color: #fff; }
3682
- .react-autoql-step-container.error {
3683
- border-color: var(--react-autoql-warning-color); }
3684
- .react-autoql-step-container.error .react-autoql-step-dot {
3685
- border-color: var(--react-autoql-warning-color);
3686
- background: var(--react-autoql-warning-color);
3687
- color: white; }
3688
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3689
- pointer-events: none;
3690
- height: 10px;
3691
- opacity: 0;
3692
- margin: 0; }
3693
-
3694
- .react-autoql-step-dot {
3695
- position: absolute;
3696
- top: 0;
3697
- left: -10px;
3698
- height: 20px;
3699
- width: 20px;
3700
- border-radius: 15px;
3701
- background: var(--react-autoql-background-color-primary, #fff);
3702
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3703
- transition: all 0.5s ease;
3704
- font-size: 10.5px;
3705
- color: var(--react-autoql-text-color-placeholder, lightgray);
3706
- text-align: center; }
3707
-
3708
- .react-autoql-step-title-container:hover {
3709
- cursor: pointer;
3710
- transition: color 0.2s ease;
3711
- color: var(--react-autoql-accent-color, #26a7df); }
3712
-
3713
- .react-autoql-step-title {
3714
- font-weight: 500;
3715
- font-size: 15px;
3716
- line-height: 15px;
3717
- padding-top: 2px; }
3718
-
3719
- .react-autoql-step-subtitle {
3720
- font-size: 13px;
3721
- padding-top: 6px;
3722
- padding-bottom: 6px;
3723
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3724
-
3725
- .react-autoql-step-content {
3726
- margin: 15px;
3727
- margin-top: 0; }
3728
-
3729
- .react-autoql-step-content-container {
3730
- transition-timing-function: ease;
3731
- transition-property: height, opacity, margin;
3732
- transition-duration: 0.5s;
3733
- opacity: 1; }
3734
-
3735
- .react-autoql-input-container {
3736
- position: relative;
3737
- margin: 2px 5px;
3738
- display: inline-block; }
3739
- .react-autoql-input-container .react-autoql-input {
3740
- border: 1px solid rgba(0, 0, 0, 0.1);
3741
- border-radius: 4px;
3742
- line-height: 32px;
3743
- min-height: 34px;
3744
- padding: 0 10px;
3745
- width: 100%;
3746
- outline: none !important;
3747
- transition: all 0.2s ease;
3748
- transition-property: border-color, color, opacity; }
3749
- .react-autoql-input-container .react-autoql-input.with-icon {
3750
- padding-left: 38px; }
3751
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3752
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3753
- color: rgba(0, 0, 0, 0.2);
3754
- opacity: 1;
3755
- /* Firefox */
3756
- font-style: italic; }
3757
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3758
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3759
- color: rgba(0, 0, 0, 0.2);
3760
- opacity: 1;
3761
- /* Firefox */
3762
- font-style: italic; }
3763
- .react-autoql-input-container .react-autoql-input::placeholder {
3764
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3765
- color: rgba(0, 0, 0, 0.2);
3766
- opacity: 1;
3767
- /* Firefox */
3768
- font-style: italic; }
3769
- .react-autoql-input-container .react-autoql-input-icon {
3770
- position: absolute;
3771
- left: 12px;
3772
- top: 8px;
3773
- opacity: 0.4;
3774
- transition: all 0.2s ease; }
3775
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3776
- height: 17px;
3777
- width: 17px; }
3778
- .react-autoql-input-container:hover .react-autoql-input,
3779
- .react-autoql-input-container .react-autoql-input:focus {
3780
- border-color: var(--react-autoql-accent-color, #26a7df); }
3781
- .react-autoql-input-container:hover .react-autoql-input-icon,
3782
- .react-autoql-input-container .react-autoql-input-icon.focus {
3783
- opacity: 1;
3784
- color: var(--react-autoql-accent-color, #26a7df); }
3785
-
3786
- .react-autoql-notification-rule-container {
3787
- display: flex; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3789
- display: flex;
3790
- flex-direction: column;
3791
- flex: 1;
3792
- width: 100%; }
3793
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3794
- display: flex;
3795
- flex: 1; }
3796
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3797
- display: flex;
3798
- padding: 2px 0;
3799
- border-radius: 4px;
3800
- transition: all 0.3s ease;
3801
- flex: 1; }
3802
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3803
- flex: 0;
3804
- flex-basis: 33px; }
3805
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3806
- flex: 1;
3807
- margin-left: 4px; }
3808
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3809
- cursor: pointer;
3810
- opacity: 0.6;
3811
- padding: 6px; }
3812
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3813
- opacity: 1; }
3814
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3815
- display: none; }
3816
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3817
- margin: 0; }
3818
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3819
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3820
- + .react-autoql-rule-term-type-selector {
3821
- color: var(--react-autoql-accent-color, #26a7df);
3822
- border-color: var(--react-autoql-accent-color, #26a7df); }
3823
-
3824
- .read-only-rule-term {
3825
- display: inline-block;
3826
- border: 1px solid rgba(0, 0, 0, 0.06);
3827
- background: rgba(0, 0, 0, 0.02);
3828
- padding: 3px 7px;
3829
- line-height: 1.5em;
3830
- margin-right: 5px;
3831
- margin-bottom: 2px;
3832
- margin-top: 2px;
3833
- border-radius: 4px; }
3834
-
3835
- .expression-term-validation-error {
3836
- padding: 0 10px;
3837
- color: var(--react-autoql-warning-color); }
3838
-
3839
3778
  .notification-read-only-group {
3840
3779
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
3780
  border-radius: 4px;
@@ -3954,6 +3893,60 @@ the whole table when the filter button is clicked */
3954
3893
  opacity: 1;
3955
3894
  color: var(--react-autoql-accent-color); }
3956
3895
 
3896
+ .react-autoql-notification-rule-container {
3897
+ display: flex; }
3898
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3899
+ display: flex;
3900
+ flex-direction: column;
3901
+ flex: 1;
3902
+ width: 100%; }
3903
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3904
+ display: flex;
3905
+ flex: 1; }
3906
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3907
+ display: flex;
3908
+ padding: 2px 0;
3909
+ border-radius: 4px;
3910
+ transition: all 0.3s ease;
3911
+ flex: 1; }
3912
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3913
+ flex: 0;
3914
+ flex-basis: 33px; }
3915
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3916
+ flex: 1;
3917
+ margin-left: 4px; }
3918
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3919
+ cursor: pointer;
3920
+ opacity: 0.6;
3921
+ padding: 6px; }
3922
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3923
+ opacity: 1; }
3924
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3925
+ display: none; }
3926
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3927
+ margin: 0; }
3928
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3929
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3930
+ + .react-autoql-rule-term-type-selector {
3931
+ color: var(--react-autoql-accent-color, #26a7df);
3932
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3933
+
3934
+ .read-only-rule-term {
3935
+ display: inline-block;
3936
+ border: 1px solid rgba(0, 0, 0, 0.06);
3937
+ background: rgba(0, 0, 0, 0.02);
3938
+ padding: 3px 7px;
3939
+ line-height: 1.5em;
3940
+ margin-right: 5px;
3941
+ margin-bottom: 2px;
3942
+ margin-top: 2px;
3943
+ border-radius: 4px; }
3944
+
3945
+ .expression-term-validation-error {
3946
+ padding: 0 10px;
3947
+ color: var(--react-autoql-warning-color); }
3948
+
3949
+
3957
3950
  .spinner-loader {
3958
3951
  display: inline-block;
3959
3952
  width: 14px;
@@ -3985,7 +3978,6 @@ the whole table when the filter button is clicked */
3985
3978
  transform: rotate(360deg); } }
3986
3979
 
3987
3980
 
3988
-
3989
3981
  .react-autoql-select {
3990
3982
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3991
3983
  border-radius: 4px;