react-autoql 3.4.1 → 3.4.5

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,525 +1,595 @@
1
- .chat-voice-record-button {
2
- width: 40px;
3
- height: 40px;
4
- border-radius: 24px;
5
- margin: 10px;
6
- margin-left: 0;
7
- font-size: 18px;
8
- line-height: 24px;
9
- outline: none !important;
10
- position: relative;
11
- cursor: pointer;
12
- overflow: hidden;
13
- background: var(--react-autoql-accent-color);
14
- color: white;
15
- border: none;
16
- flex-shrink: 0;
17
- flex-grow: 0; }
18
-
19
- .chat-voice-record-button:hover {
20
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1
+ #condition-lock-snackbar-success {
2
+ visibility: hidden;
3
+ min-width: 200px;
4
+ line-height: 1 !important;
5
+ font-size: 14px !important;
6
+ background-color: var(--react-autoql-background-color-secondary);
7
+ color: var(--react-autoql-success-color);
8
+ text-align: center;
9
+ border-radius: 4px;
10
+ padding: 6px;
11
+ position: fixed;
12
+ display: block;
13
+ z-index: 999999999;
14
+ transform: translateX(-10%);
15
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
21
16
 
22
- .chat-voice-record-button.listening {
23
- background: #ff471a; }
17
+ .autoql-condition-locking-menu-container
18
+ .react-autosuggest__suggestions-container--open {
19
+ transform: translateX(8%);
20
+ width: 90% !important; }
24
21
 
25
- .chat-voice-record-icon {
26
- vertical-align: top; }
22
+ #condition-lock-snackbar-success.show {
23
+ visibility: visible;
24
+ -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
25
+ animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
27
26
 
28
- .react-autoql-tooltip {
29
- font-family: inherit;
30
- letter-spacing: 0.04em;
31
- padding: 7px 15px;
32
- opacity: 1 !important;
33
- z-index: 99999 !important; }
27
+ .react-autoql-drawer {
28
+ font-family: var(--react-autoql-font-family), sans-serif;
29
+ line-height: 22px; }
34
30
 
35
- @-webkit-keyframes slide {
36
- 0% {
37
- transform: translateX(-100%); }
38
- 100% {
39
- transform: translateX(100%); } }
31
+ .react-autoql-drawer.disable-selection {
32
+ -webkit-user-select: none;
33
+ -moz-user-select: none;
34
+ -ms-user-select: none;
35
+ user-select: none; }
40
36
 
41
- @keyframes slide {
42
- 0% {
43
- transform: translateX(-100%); }
44
- 100% {
45
- transform: translateX(100%); } }
37
+ .react-autoql-drawer .react-autoql-drawer-content-container {
38
+ width: 100%;
39
+ height: 100%;
40
+ display: flex;
41
+ background: var(--react-autoql-background-color-secondary);
42
+ overflow: hidden;
43
+ border-radius: 4px;
44
+ flex-direction: column;
45
+ justify-content: stretch; }
46
46
 
47
- @-webkit-keyframes move {
48
- 0% {
49
- left: 0;
50
- opacity: 0; }
51
- 5% {
52
- opacity: 0; }
53
- 48% {
54
- opacity: 0.2; }
55
- 80% {
56
- opacity: 0; }
57
- 100% {
58
- left: 82%; } }
47
+ .react-autoql-drawer .chat-header-container {
48
+ display: flex;
49
+ justify-content: space-between;
50
+ width: 100%;
51
+ height: 60px;
52
+ background: var(--react-autoql-accent-color);
53
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
54
+ flex-grow: 0;
55
+ flex-shrink: 0;
56
+ z-index: 1; }
59
57
 
60
- @keyframes move {
61
- 0% {
62
- left: 0;
63
- opacity: 0; }
64
- 5% {
65
- opacity: 0; }
66
- 48% {
67
- opacity: 0.2; }
68
- 80% {
69
- opacity: 0; }
70
- 100% {
71
- left: 82%; } }
58
+ .react-autoql-drawer .react-autoql-header-right-container {
59
+ display: flex;
60
+ justify-content: right;
61
+ width: 100px; }
72
62
 
73
- .react-autoql-icon {
63
+ .react-autoql-drawer .react-autoql-header-center-container {
74
64
  position: relative;
75
- opacity: 1; }
76
- .react-autoql-icon.warning {
77
- color: var(--react-autoql-warning-color) !important; }
78
- .react-autoql-icon.danger {
79
- color: var(--react-autoql-danger-color) !important; }
80
-
81
- span.react-autoql-icon {
82
- vertical-align: unset;
83
- text-align: left;
84
- margin: 0;
85
- padding: 0;
86
- float: none !important;
87
- color: inherit; }
88
- span.react-autoql-icon svg {
89
- float: none !important;
90
- color: inherit;
91
- vertical-align: unset;
92
- text-align: left;
93
- margin: 0;
94
- padding: 0;
95
- opacity: 1;
96
- height: 1em;
97
- margin-bottom: -0.1em; }
65
+ color: #fff;
66
+ line-height: 60px;
67
+ font-size: 18px;
68
+ letter-spacing: 0.05em;
69
+ font-weight: 600;
70
+ overflow: hidden;
71
+ text-overflow: ellipsis;
72
+ white-space: nowrap; }
98
73
 
99
- .slack-logo {
100
- display: inline-block;
101
- height: 100%;
102
- margin-bottom: 3px; }
103
- .slack-logo img {
104
- vertical-align: middle;
105
- height: 1em;
106
- width: 1em; }
74
+ .react-autoql-drawer .header-title {
75
+ -webkit-animation: fadeIn 0.3s;
76
+ animation: fadeIn 0.3s; }
107
77
 
108
- .react-autoql-badge {
109
- position: absolute;
110
- background: var(--react-autoql-warning-color);
111
- border: 1px solid var(--react-autoql-background-color-primary);
112
- width: 0.5em;
113
- height: 0.5em;
114
- top: -0.1em;
115
- right: -0.25em;
116
- border-radius: 50%;
117
- box-sizing: content-box; }
78
+ .react-autoql-drawer .react-autoql-header-left-container {
79
+ width: 100px; }
118
80
 
119
- .react-autoql-response-content-container:not(.html-content) {
120
- position: relative;
121
- display: flex;
122
- flex-direction: column;
123
- justify-content: center;
124
- align-items: center;
125
- background-color: inherit;
126
- font-size: 14px;
127
- height: 100%;
128
- width: 100%;
129
- overflow: hidden;
130
- color: var(--react-autoql-text-color-primary); }
81
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
82
+ line-height: 1em;
83
+ font-weight: normal;
84
+ float: none;
85
+ opacity: 1; }
86
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
87
+ width: 30px;
88
+ height: 30px;
89
+ padding-top: 3px; }
90
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
91
+ position: absolute;
92
+ right: 10px;
93
+ -webkit-animation: fadeIn 0.3s;
94
+ animation: fadeIn 0.3s; }
95
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
96
+ width: 28px;
97
+ height: 28px;
98
+ padding-top: 7px;
99
+ box-sizing: border-box; }
131
100
 
132
- .react-autoql-response-content-container.html-content {
133
- position: relative;
134
- background-color: inherit;
135
- text-align: left;
136
- font-size: 14px;
137
- height: 100%;
138
- width: 100%;
139
- overflow: hidden;
140
- color: var(--react-autoql-text-color-primary); }
141
- .react-autoql-response-content-container.html-content table th {
142
- border-bottom: 2px solid var(--react-autoql-border-color); }
143
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
144
- border-bottom: 1px solid var(--react-autoql-border-color); }
145
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
146
- border-right: 1px solid var(--react-autoql-border-color); }
147
- .react-autoql-response-content-container.html-content table th,
148
- .react-autoql-response-content-container.html-content table td {
149
- padding: 5px 10px; }
150
- .react-autoql-response-content-container.html-content * {
151
- font-size: inherit; }
152
- .react-autoql-response-content-container.html-content sup,
153
- .react-autoql-response-content-container.html-content sub {
154
- font-size: 10px; }
155
- .react-autoql-response-content-container.html-content > *:first-child {
156
- margin-top: 0 !important; }
157
- .react-autoql-response-content-container.html-content > *:last-child {
101
+ .react-autoql-drawer .chat-message-container {
102
+ scroll-behavior: smooth !important;
103
+ max-height: calc(100% - 140px);
104
+ overflow-y: auto;
105
+ overflow-x: hidden;
106
+ flex: 1; }
107
+ .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
108
+ overflow-x: hidden !important;
158
109
  margin-bottom: 0 !important; }
159
- .react-autoql-response-content-container.html-content caption {
160
- display: table-caption;
161
- text-align: -webkit-center;
162
- padding-top: unset;
163
- padding-bottom: unset;
164
- color: unset;
165
- text-align: unset;
166
- caption-side: unset; }
167
110
 
168
- .react-autoql-response-content-container.table {
169
- max-height: 100vh !important;
170
- overflow-y: scroll;
171
- scrollbar-width: none; }
111
+ .react-autoql-drawer .chat-bar-container {
112
+ position: relative;
113
+ padding: 10px;
114
+ padding-top: 30px; }
172
115
 
173
- .react-autoql-response-content-container.table::-webkit-scrollbar {
174
- width: 0;
175
- height: 0; }
116
+ .react-autoql-drawer .chat-drawer-chat-bar {
117
+ flex-shrink: 0;
118
+ flex-grow: 0;
119
+ height: 60px;
120
+ -webkit-animation: fadeIn 0.3s;
121
+ animation: fadeIn 0.3s; }
176
122
 
177
- .react-autoql-suggestion-btn {
178
- padding: 6px 14px;
179
- background: transparent;
180
- font-family: inherit;
181
- font-size: 12px;
182
- margin-bottom: 5px;
183
- outline: none !important;
184
- cursor: pointer;
185
- letter-spacing: 0.05em;
186
- transition: all 0.1s ease;
187
- border: 1px solid rgba(0, 0, 0, 0.15);
188
- border-radius: 5px;
189
- color: inherit; }
123
+ .react-autoql-drawer .watermark {
124
+ color: var(--react-autoql-text-color-primary);
125
+ text-align: center;
126
+ opacity: 0.2;
127
+ top: 6px;
128
+ width: calc(100% - 10px);
129
+ font-size: 13px; }
190
130
 
191
- .react-autoql-suggestion-btn:hover {
192
- border-color: transparent;
193
- color: white;
194
- background: var(--react-autoql-accent-color); }
131
+ .react-autoql-drawer .condition-list-container {
132
+ position: absolute;
133
+ border: 1px solid var(--react-autoql-text-color-primary);
134
+ border-radius: 100rem;
135
+ background-color: transparent;
136
+ color: var(--react-autoql-text-color-primary);
137
+ padding: 0 5px 0 5px;
138
+ transition: background-color 250ms ease, box-shadow 250ms ease;
139
+ z-index: 9999999;
140
+ width: -webkit-fit-content;
141
+ width: -moz-fit-content;
142
+ width: fit-content;
143
+ height: -webkit-fit-content;
144
+ height: -moz-fit-content;
145
+ height: fit-content; }
195
146
 
196
- .react-autoql-help-link-btn {
197
- padding: 6px 14px;
147
+ .condition-list-display {
148
+ display: none;
149
+ background-color: var(--react-autoql-background-color-primary);
150
+ border-radius: 4px;
151
+ padding: 5px;
152
+ width: -webkit-fit-content;
153
+ width: -moz-fit-content;
154
+ width: fit-content;
155
+ height: -webkit-fit-content;
156
+ height: -moz-fit-content;
157
+ height: fit-content;
158
+ padding: 10px;
159
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
160
+
161
+ .react-autoql-drawer .react-autoql-drawer:focus {
162
+ outline: none; }
163
+
164
+ .react-autoql-drawer .chat-header-container button {
198
165
  background: transparent;
199
- border-radius: 5px;
200
- font-family: inherit;
201
- font-size: 12px;
202
- margin-top: 5px;
203
- outline: none !important;
166
+ border: none;
167
+ color: white;
168
+ margin: 10px;
169
+ margin-right: 0;
170
+ font-size: 20px;
204
171
  cursor: pointer;
205
- letter-spacing: 0.05em;
206
- transition: all 0.1s ease;
207
- border-color: #e2e2e26e;
208
- color: inherit; }
172
+ outline: none !important; }
209
173
 
210
- .react-autoql-help-link-btn:hover {
174
+ .react-autoql-drawer .chat-header-container button:hover {
211
175
  opacity: 0.7; }
212
176
 
213
- .react-autoql-help-link-icon {
214
- width: 15px;
215
- height: 15px;
216
- margin-bottom: -3px;
217
- margin-right: 3px; }
218
-
219
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
220
- color: var(--react-autoql-success-color); }
177
+ .react-autoql-drawer .chat-header-container button svg {
178
+ width: 35px;
179
+ height: 35px; }
221
180
 
222
- .react-autoql-suggestion-message {
223
- height: 100%;
224
- width: 100%;
225
- word-break: break-word; }
181
+ .topics-container {
182
+ margin: 5px 0; }
226
183
 
227
- .react-autoql-suggestions-select {
228
- position: relative;
229
- display: inline-block;
230
- height: 30px;
231
- background: none;
232
- outline: none !important;
233
- border: 1px solid;
234
- font-family: inherit;
235
- letter-spacing: 0.05em;
236
- color: #28a8e0;
184
+ .intro-qi-link {
237
185
  cursor: pointer;
238
- font-size: inherit; }
239
-
240
- .no-columns-error-message {
241
- position: absolute;
242
- height: 100%;
243
- width: 100%;
244
- display: flex;
245
- justify-content: center;
246
- flex-direction: column;
247
- text-align: center;
248
- padding: 20px;
249
- font-size: 13px; }
250
- .no-columns-error-message .warning-icon {
251
- font-size: 22px;
252
- display: block;
253
- margin-bottom: -13px;
254
- text-align: center; }
255
- .no-columns-error-message .eye-icon {
256
- vertical-align: bottom;
257
- line-height: 18px; }
258
-
259
- /* query validation */
260
- .react-autoql-query-validation-selector-container {
261
- display: inline-block;
262
- position: relative; }
186
+ color: var(--react-autoql-accent-color); }
263
187
 
264
- .react-autoql-select-popup-container.query-validation-select {
265
- padding: 5px 0;
266
- letter-spacing: 0.03em;
267
- font-family: var(--react-autoql-font-family), sans-serif; }
268
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
269
- height: unset;
270
- font-size: 14px;
271
- line-height: 24px;
272
- padding: 0 15px; }
273
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
274
- color: #d84830; }
188
+ /* custom scrollbar */
189
+ .react-autoql-drawer .chat-message-container > div:last-child {
190
+ opacity: 0;
191
+ transition: opacity 200ms ease; }
275
192
 
276
- .react-autoql-query-validation-query {
277
- text-align: center; }
193
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
194
+ opacity: 1; }
278
195
 
279
- .react-autoql-query-validation-execute-btn {
280
- height: 38px;
281
- background: none;
196
+ /* rc-drawer */
197
+ .react-autoql-drawer .drawer-content {
198
+ background: white;
282
199
  border-radius: 4px;
283
- margin-top: 24px;
284
- width: 100%;
285
- color: inherit;
286
- cursor: pointer;
287
- outline: none !important;
288
- border-color: #e2e2e26e;
289
- transition: all 0.2s ease; }
290
-
291
- .react-autoql-query-validation-execute-btn:hover {
292
- border-color: #28a8e0; }
200
+ overflow: visible;
201
+ opacity: 1;
202
+ transition: opacity 0.3s ease; }
293
203
 
294
- .react-autoql-execute-query-icon {
295
- font-size: 16px;
296
- vertical-align: middle !important;
297
- padding-right: 3px !important; }
298
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
299
- height: 19px;
300
- width: 19px;
301
- margin-top: 3px;
302
- margin-right: 4px;
303
- vertical-align: top;
304
- fill: var(--react-autoql-accent-color); }
204
+ .react-autoql-drawer.closed .drawer-content {
205
+ opacity: 0; }
305
206
 
306
- .react-autoql-query-validation-select {
307
- position: relative;
308
- display: inline-block;
309
- height: 2em;
310
- background: none;
311
- outline: none !important;
312
- border: none;
313
- letter-spacing: 0.05em;
314
- font-family: inherit;
315
- font-size: inherit;
316
- margin: 0;
317
- padding: 0;
318
- border-radius: 0;
319
- border-bottom: 1px dashed;
320
- color: var(--react-autoql-accent-color); }
207
+ .react-autoql-drawer .drawer-handle {
208
+ transition: opacity 0.5s ease;
209
+ overflow: hidden;
210
+ width: 50px;
211
+ height: 50px;
212
+ border-radius: 50px !important;
213
+ font-size: 22px; }
214
+ .react-autoql-drawer .drawer-handle.default-logo {
215
+ background-color: var(--react-autoql-accent-color, #26a7df);
216
+ color: #fff; }
217
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
218
+ position: absolute;
219
+ vertical-align: top;
220
+ top: 11px;
221
+ left: 12px; }
222
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
223
+ position: absolute;
224
+ width: 26px;
225
+ height: 26px; }
321
226
 
322
- .react-autoql-query-validation-delete-button {
323
- position: relative;
324
- cursor: pointer;
325
- margin-bottom: -2px; }
227
+ .react-autoql-drawer.drawer-right .drawer-handle {
228
+ left: -70px !important; }
326
229
 
327
- .react-autoql-chart-tooltip {
328
- font-family: var(--react-autoql-font-family), sans-serif;
329
- letter-spacing: 0.04em;
330
- line-height: 22px;
331
- font-size: 13px;
332
- padding: 7px 15px;
333
- transition: all 0.2s ease !important;
334
- text-align: left !important;
335
- opacity: 1 !important;
336
- z-index: 99999 !important;
337
- /* necessary to show up on top of rc drawer */ }
230
+ .react-autoql-drawer.drawer-left .drawer-handle {
231
+ right: -60px !important; }
338
232
 
339
- .single-value-response {
340
- color: inherit;
341
- cursor: unset; }
342
- .single-value-response:hover {
343
- color: inherit; }
233
+ .react-autoql-drawer.drawer-top .drawer-handle {
234
+ bottom: -60px !important; }
344
235
 
345
- .single-value-response.with-drilldown:hover {
346
- color: inherit;
347
- text-decoration: underline;
348
- font-weight: 600;
349
- cursor: pointer; }
236
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
237
+ top: -60px !important; }
350
238
 
351
- .react-autoql-query-validation-container {
352
- width: 100%; }
353
-
354
- .react-autoql-query-validation-description {
355
- margin-bottom: 14px; }
356
-
357
- .context-menu {
358
- background: var(--react-autoql-background-color-primary);
359
- /* height: 100px; */
360
- width: 150px;
361
- padding: 10px 0; }
239
+ .react-autoql-drawer .drawer-handle.hide {
240
+ opacity: 0;
241
+ visibility: hidden; }
362
242
 
363
- .context-menu-list {
364
- list-style-type: none;
365
- width: 100%;
366
- margin: 0;
367
- padding: 0; }
243
+ .react-autoql-drawer .drawer-handle-icon,
244
+ .react-autoql-drawer .drawer-handle-icon::before,
245
+ .react-autoql-drawer .drawer-handle-icon::after {
246
+ background: var(--react-autoql-text-color-primary); }
368
247
 
369
- .context-menu-list li {
370
- color: var(--react-autoql-text-color-primary);
371
- width: 100%;
372
- height: 35px;
373
- line-height: 35px;
374
- padding: 0 20px;
375
- cursor: pointer; }
248
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
249
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
250
+ left: 0; }
376
251
 
377
- .context-menu-list li:hover {
378
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
252
+ .react-autoql-drawer .drawer-content-wrapper {
253
+ background: transparent; }
379
254
 
380
- .react-autoql-bar-container {
381
- position: relative;
382
- display: flex;
383
- flex-direction: row; }
255
+ .react-autoql-drawer.drawer-right .drawer-content-wrapper,
256
+ .react-autoql-drawer.drawer-left .drawer-content-wrapper {
257
+ max-width: calc(100vw - 45px) !important;
258
+ min-width: 400px !important; }
384
259
 
385
- .react-autoql-chatbar-input {
386
- padding: 10px;
387
- padding-left: 20px;
388
- margin: 10px;
389
- height: 42px;
390
- box-sizing: border-box;
391
- border-radius: 24px;
392
- font-size: 16px;
393
- font-family: inherit;
394
- letter-spacing: 0.04em;
395
- outline: none !important;
396
- width: calc(100% - 20px);
397
- font-family: inherit;
398
- /* Default styles outside of data messenger */
399
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
400
- background: var(--react-autoql-background-color-primary);
401
- color: #5d5d5d; }
260
+ .react-autoql-drawer.drawer-top .drawer-content-wrapper,
261
+ .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
262
+ max-height: calc(100vh - 45px) !important;
263
+ min-height: 400px !important; }
402
264
 
403
- .react-autoql-chatbar-input.left-padding {
404
- padding-left: 54px; }
265
+ .react-autoql-drawer-resize-handle {
266
+ position: absolute;
267
+ background: transparent; }
268
+ .react-autoql-drawer-resize-handle.right {
269
+ top: 0;
270
+ left: -5px;
271
+ width: 5px;
272
+ height: 100vh;
273
+ cursor: ew-resize; }
274
+ .react-autoql-drawer-resize-handle.left {
275
+ top: 0;
276
+ right: -5px;
277
+ width: 5px;
278
+ height: 100vh;
279
+ cursor: ew-resize; }
280
+ .react-autoql-drawer-resize-handle.top {
281
+ bottom: -5px;
282
+ left: 0;
283
+ height: 5px;
284
+ width: 100vw;
285
+ cursor: ns-resize; }
286
+ .react-autoql-drawer-resize-handle.bottom {
287
+ top: -5px;
288
+ left: 0;
289
+ height: 5px;
290
+ width: 100vw;
291
+ cursor: ns-resize; }
405
292
 
406
- .react-autoql-chatbar-input:disabled {
407
- background: rgba(0, 0, 0, 0.03); }
293
+ .react-autoql-drawer .response-loading-container {
294
+ position: absolute;
295
+ bottom: 45px;
296
+ left: 20px; }
408
297
 
409
- .react-autoql-chatbar-input:not(:disabled):hover {
410
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
298
+ /* Tooltips */
299
+ .react-autoql-drawer-tooltip {
300
+ font-family: var(--react-autoql-font-family), sans-serif;
301
+ letter-spacing: 0.04em;
302
+ padding: 7px 15px;
303
+ transition: none;
304
+ opacity: 1 !important;
305
+ z-index: 99999 !important;
306
+ /* necessary to show up on top of rc drawer */ }
411
307
 
412
- .react-autoql-chatbar-input::-moz-placeholder {
413
- /* Default color outside of data messenger */
414
- color: #999 !important; }
308
+ .interpretation-tooltip {
309
+ font-family: var(--react-autoql-font-family), sans-serif;
310
+ font-size: 12px;
311
+ text-align: left;
312
+ letter-spacing: 0.04em;
313
+ padding: 7px 15px;
314
+ max-width: 400px;
315
+ opacity: 1 !important;
316
+ transition: none;
317
+ z-index: 99999 !important;
318
+ /* necessary to show up on top of rc drawer */ }
415
319
 
416
- .react-autoql-chatbar-input:-ms-input-placeholder {
417
- /* Default color outside of data messenger */
418
- color: #999 !important; }
320
+ .react-autoql-condition-lock-menu {
321
+ color: var(--react-autoql-text-color-primary);
322
+ background: var(--react-autoql-background-color-primary); }
419
323
 
420
- .react-autoql-chatbar-input::placeholder {
421
- /* Default color outside of data messenger */
422
- color: #999 !important; }
324
+ .react-tiny-popover-container {
325
+ z-index: 9999;
326
+ border: 1px solid #ababab52;
327
+ border-radius: 4px;
328
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
329
+ transition: opacity 0.2s ease 0s !important; }
423
330
 
424
- /* autosuggest */
425
- .react-autoql-bar-container .react-autosuggest__container,
426
- .react-autoql-chatbar-input-container {
427
- position: relative;
428
- flex: 1; }
331
+ .clear-messages-confirm-popover {
332
+ color: var(--react-autoql-text-color-primary);
333
+ background: var(--react-autoql-background-color-primary);
334
+ text-align: right;
335
+ padding: 18px;
336
+ width: 266px; }
429
337
 
430
- .react-autoql-bar-container .react-autosuggest__input--focused {
431
- outline: none; }
338
+ .react-autoql-confirm-text {
339
+ text-align: center; }
432
340
 
433
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
434
- display: none; }
341
+ .react-autoql-menu-text {
342
+ text-align: center; }
343
+ .react-autoql-menu-text:hover {
344
+ color: var(--react-autoql-accent-color);
345
+ cursor: pointer; }
435
346
 
436
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
437
- display: none; }
347
+ .react-autoql-confirm-icon {
348
+ color: #faad14 !important;
349
+ vertical-align: middle;
350
+ margin-right: 5px !important;
351
+ margin-bottom: 3px; }
438
352
 
439
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
353
+ .data-messenger-tab-container {
440
354
  position: absolute;
441
- top: 45px;
442
- bottom: unset;
443
- margin: 10px;
444
- padding-top: 5px;
445
- padding-bottom: 5px;
446
- display: block;
447
- width: calc(100% - 20px);
448
- height: unset;
449
- border-radius: 24px;
450
- font-family: inherit;
451
- font-size: 15px;
452
- font-weight: normal;
453
- z-index: 2;
454
- overflow: hidden;
455
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
456
- /* Default styles outside of data messenger */
457
- background-color: white;
458
- color: #5d5d5d; }
459
-
460
- .react-autoql-bar-container.autosuggest-top
461
- .react-autosuggest__suggestions-container--open {
462
- top: unset;
463
- bottom: 45px; }
464
-
465
- .react-autoql-bar-container.autosuggest-bottom
466
- .react-autosuggest__suggestions-container--open {
467
- top: 45px;
468
- bottom: unset; }
469
-
470
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
471
- margin: 0;
472
- padding: 0;
473
- list-style-type: none; }
474
-
475
- /* Autocomplete styles */
476
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
477
- background-color: var(--react-autoql-background-color-primary);
478
- border: 1px solid var(--react-autoql-border-color);
479
- color: var(--react-autoql-text-color-primary); }
480
-
481
- .react-autoql-bar-container .react-autosuggest__suggestion {
482
- color: var(--react-autoql-text-color-primary); }
483
-
484
- .react-autoql-chatbar-input {
485
- border: 1px solid var(--react-autoql-border-color);
486
- color: var(--react-autoql-text-color-primary); }
355
+ background: transparent;
356
+ display: flex;
357
+ justify-content: center;
358
+ align-items: center;
359
+ pointer-events: none; }
360
+ .data-messenger-tab-container.right {
361
+ height: 100vh;
362
+ width: 60px;
363
+ left: -60px; }
364
+ .data-messenger-tab-container.left {
365
+ height: 100vh;
366
+ width: 60px;
367
+ right: -60px; }
368
+ .data-messenger-tab-container.top {
369
+ width: 100vw;
370
+ height: 60px;
371
+ bottom: -60px; }
372
+ .data-messenger-tab-container.bottom {
373
+ width: 100vw;
374
+ height: 60px;
375
+ top: -60px; }
487
376
 
488
- .react-autoql-chatbar-input::-moz-placeholder {
489
- color: var(--react-autoql-text-color-placeholder); }
377
+ /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
378
+ .page-switcher-shadow-container {
379
+ position: absolute;
380
+ background: transparent;
381
+ overflow: hidden; }
490
382
 
491
- .react-autoql-chatbar-input:-ms-input-placeholder {
492
- color: var(--react-autoql-text-color-placeholder); }
383
+ .page-switcher-shadow-container.right {
384
+ top: 80px;
385
+ width: 60px; }
493
386
 
494
- .react-autoql-chatbar-input::placeholder {
495
- color: var(--react-autoql-text-color-placeholder); }
387
+ .page-switcher-shadow-container.left {
388
+ top: 80px;
389
+ width: 60px; }
496
390
 
497
- .react-autoql-bar-container .react-autosuggest__suggestion {
498
- cursor: pointer;
499
- padding: 2px;
500
- padding-left: 18px;
501
- letter-spacing: 0.05em;
502
- line-height: 22.5px; }
391
+ /* Container holding the tabs */
392
+ .page-switcher-container {
393
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
394
+ overflow: hidden;
395
+ box-sizing: border-box;
396
+ display: flex;
397
+ pointer-events: all; }
398
+ .page-switcher-container .tab {
399
+ position: relative;
400
+ z-index: 1;
401
+ background: var(--react-autoql-accent-color);
402
+ color: #fff;
403
+ opacity: 1;
404
+ font-size: 22px;
405
+ text-align: center;
406
+ transform: translate(0, 0);
407
+ cursor: pointer;
408
+ transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
409
+ transition-duration: 0.2s; }
410
+ .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
411
+ height: 22px;
412
+ width: 23px; }
413
+ .page-switcher-container.right {
414
+ border-top-left-radius: 5px;
415
+ border-bottom-left-radius: 5px;
416
+ margin-top: 20px;
417
+ margin-left: 20px;
418
+ margin-bottom: 20px;
419
+ flex-direction: column; }
420
+ .page-switcher-container.right .tab {
421
+ box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
422
+ .page-switcher-container.left {
423
+ border-top-right-radius: 5px;
424
+ border-bottom-right-radius: 5px;
425
+ margin-top: 20px;
426
+ margin-right: 20px;
427
+ margin-bottom: 20px;
428
+ margin-left: -5px;
429
+ flex-direction: column; }
430
+ .page-switcher-container.left .tab {
431
+ box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
432
+ .page-switcher-container.top {
433
+ border-bottom-right-radius: 5px;
434
+ border-bottom-left-radius: 5px;
435
+ margin-right: 20px;
436
+ margin-left: 20px;
437
+ margin-bottom: 20px;
438
+ flex-direction: row;
439
+ height: 40px; }
440
+ .page-switcher-container.top .tab {
441
+ box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
442
+ .page-switcher-container.bottom {
443
+ border-top-left-radius: 5px;
444
+ border-top-right-radius: 5px;
445
+ margin-top: 20px;
446
+ margin-left: 20px;
447
+ margin-right: 20px;
448
+ flex-direction: row;
449
+ height: 40px; }
450
+ .page-switcher-container.bottom .tab {
451
+ box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
503
452
 
504
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
505
- background-color: rgba(0, 0, 0, 0.1) !important; }
453
+ /* Individual Tabs */
454
+ .page-switcher-container .tab {
455
+ display: flex;
456
+ justify-content: center;
457
+ align-items: center; }
506
458
 
507
- .react-autoql-bar-container .react-autosuggest__section-title {
508
- padding: 10px 0 0 10px;
509
- font-size: 12px;
510
- color: #777; }
459
+ .data-messenger-notification-btn {
460
+ display: flex;
461
+ flex-direction: column;
462
+ justify-content: flex-start;
463
+ line-height: inherit; }
511
464
 
512
- .input-response-loading-container {
513
- position: absolute;
514
- right: 23px;
515
- top: -2px; }
465
+ .page-switcher-container.right .tab,
466
+ .page-switcher-container.left .tab {
467
+ height: 65px; }
516
468
 
517
- .chat-bar-input-icon {
518
- position: absolute;
519
- color: #28a8e0;
520
- font-size: 20px;
521
- left: 30px;
522
- top: 15px; }
469
+ .page-switcher-container.top .tab,
470
+ .page-switcher-container.bottom .tab {
471
+ width: 65px; }
472
+
473
+ .page-switcher-container.bottom .tab {
474
+ background: var(--react-autoql-background-color-secondary);
475
+ color: var(--react-autoql-text-color-primary); }
476
+
477
+ .page-switcher-container .tab.active {
478
+ background: var(--react-autoql-background-color-secondary);
479
+ color: var(--react-autoql-text-color-primary);
480
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
481
+ font-weight: bold;
482
+ position: relative;
483
+ z-index: 2; }
484
+
485
+ .page-switcher-container.bottom .tab.active {
486
+ background: var(--react-autoql-accent-color);
487
+ color: #fff;
488
+ font-weight: bold; }
489
+
490
+ /* animations */
491
+ @-webkit-keyframes response-loading1 {
492
+ 0% {
493
+ transform: scale(0); }
494
+ 100% {
495
+ transform: scale(1); } }
496
+ @keyframes response-loading1 {
497
+ 0% {
498
+ transform: scale(0); }
499
+ 100% {
500
+ transform: scale(1); } }
501
+
502
+ @-webkit-keyframes response-loading3 {
503
+ 0% {
504
+ transform: scale(1); }
505
+ 100% {
506
+ transform: scale(0); } }
507
+
508
+ @keyframes response-loading3 {
509
+ 0% {
510
+ transform: scale(1); }
511
+ 100% {
512
+ transform: scale(0); } }
513
+
514
+ @-webkit-keyframes response-loading2 {
515
+ 0% {
516
+ transform: translate(0, 0); }
517
+ 100% {
518
+ transform: translate(19px, 0); } }
519
+
520
+ @keyframes response-loading2 {
521
+ 0% {
522
+ transform: translate(0, 0); }
523
+ 100% {
524
+ transform: translate(19px, 0); } }
525
+
526
+ @-webkit-keyframes scale-up-center {
527
+ 0% {
528
+ transform: scale(0); }
529
+ 100% {
530
+ transform: scale(1); } }
531
+
532
+ @keyframes scale-up-center {
533
+ 0% {
534
+ transform: scale(0); }
535
+ 100% {
536
+ transform: scale(1); } }
537
+
538
+ @-webkit-keyframes fadeIn {
539
+ 0% {
540
+ opacity: 0; }
541
+ 100% {
542
+ opacity: 1; } }
543
+
544
+ @keyframes fadeIn {
545
+ 0% {
546
+ opacity: 0; }
547
+ 100% {
548
+ opacity: 1; } }
549
+
550
+ @-webkit-keyframes slideDown {
551
+ 0% {
552
+ transform: translateY(-100%); }
553
+ 100% {
554
+ transform: translateY(0%); } }
555
+
556
+ @keyframes slideDown {
557
+ 0% {
558
+ transform: translateY(-100%); }
559
+ 100% {
560
+ transform: translateY(0%); } }
561
+
562
+ @-webkit-keyframes snackbarFadein {
563
+ from {
564
+ top: 30px;
565
+ opacity: 0; }
566
+ to {
567
+ top: 60px;
568
+ opacity: 1; } }
569
+
570
+ @keyframes snackbarFadein {
571
+ from {
572
+ top: 30px;
573
+ opacity: 0; }
574
+ to {
575
+ top: 60px;
576
+ opacity: 1; } }
577
+
578
+ @-webkit-keyframes snackbarFadeout {
579
+ from {
580
+ top: 60px;
581
+ opacity: 1; }
582
+ to {
583
+ top: 30px;
584
+ opacity: 0; } }
585
+
586
+ @keyframes snackbarFadeout {
587
+ from {
588
+ top: 60px;
589
+ opacity: 1; }
590
+ to {
591
+ top: 30px;
592
+ opacity: 0; } }
523
593
 
524
594
  .loading-container-centered {
525
595
  height: 100%;
@@ -565,828 +635,589 @@ span.react-autoql-icon {
565
635
  -webkit-animation: response-loading3 0.6s infinite;
566
636
  animation: response-loading3 0.6s infinite; }
567
637
 
568
- #condition-lock-snackbar-success {
569
- visibility: hidden;
570
- min-width: 200px;
571
- line-height: 1 !important;
572
- font-size: 14px !important;
573
- background-color: var(--react-autoql-background-color-secondary);
574
- color: var(--react-autoql-success-color);
575
- text-align: center;
576
- border-radius: 4px;
577
- padding: 6px;
578
- position: fixed;
579
- display: block;
580
- z-index: 999999999;
581
- transform: translateX(-10%);
582
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
638
+ .react-autoql-dashboard-container {
639
+ background: var(--react-autoql-background-color-secondary);
640
+ height: 100%;
641
+ width: 100%;
642
+ overflow: hidden; }
583
643
 
584
- .autoql-condition-locking-menu-container
585
- .react-autosuggest__suggestions-container--open {
586
- transform: translateX(8%);
587
- width: 90% !important; }
644
+ .react-autoql-dashboard-container.edit-mode {
645
+ padding-bottom: 200px; }
588
646
 
589
- #condition-lock-snackbar-success.show {
590
- visibility: visible;
591
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
592
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
647
+ .dashboard-drilldown-modal .ReactModal__Content {
648
+ top: unset !important;
649
+ margin-top: 20px !important;
650
+ max-height: 93vh !important; }
593
651
 
594
- .react-autoql-drawer {
595
- font-family: var(--react-autoql-font-family), sans-serif;
596
- line-height: 22px; }
652
+ .dashboard-drilldown-modal .react-autoql-modal-body {
653
+ padding: 0; }
597
654
 
598
- .react-autoql-drawer.disable-selection {
599
- -webkit-user-select: none;
600
- -moz-user-select: none;
601
- -ms-user-select: none;
602
- user-select: none; }
655
+ .dashboard-drilldown-modal .react-autoql-table {
656
+ opacity: 0.9;
657
+ font-size: 11px; }
603
658
 
604
- .react-autoql-drawer .react-autoql-drawer-content-container {
659
+ .dashboard-drilldown-modal .splitter-layout {
660
+ height: calc(100% - 55px); }
661
+
662
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
663
+ padding: 20px;
664
+ padding-bottom: 10px; }
665
+
666
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
667
+ text-align: right;
605
668
  width: 100%;
606
- height: 100%;
607
- display: flex;
608
- background: var(--react-autoql-background-color-secondary);
669
+ padding-right: 20px; }
670
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
671
+ position: absolute;
672
+ bottom: 5px;
673
+ width: 100px;
674
+ right: 0; }
675
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
676
+ padding-top: 10px;
677
+ margin-bottom: -8px; }
678
+
679
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
680
+ padding: 20px;
681
+ padding-top: 10px;
609
682
  overflow: hidden;
610
- border-radius: 4px;
611
- flex-direction: column;
612
- justify-content: stretch; }
683
+ height: 100%; }
613
684
 
614
- .react-autoql-drawer .chat-header-container {
615
- display: flex;
616
- justify-content: space-between;
617
- width: 100%;
618
- height: 60px;
619
- background: var(--react-autoql-accent-color);
620
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
621
- flex-grow: 0;
622
- flex-shrink: 0;
623
- z-index: 1; }
685
+ .empty-dashboard-message-container {
686
+ font-family: var(--react-autoql-font-family);
687
+ color: var(--react-autoql-text-color-primary);
688
+ letter-spacing: 0.02em;
689
+ text-align: center;
690
+ padding: 100px;
691
+ height: 100%;
692
+ width: 100%; }
624
693
 
625
- .react-autoql-drawer .react-autoql-header-right-container {
626
- display: flex;
627
- justify-content: right;
628
- width: 100px; }
694
+ .empty-dashboard-new-tile-btn {
695
+ color: var(--react-autoql-accent-color);
696
+ font-weight: bold;
697
+ cursor: pointer; }
629
698
 
630
- .react-autoql-drawer .react-autoql-header-center-container {
631
- position: relative;
632
- color: #fff;
633
- line-height: 60px;
699
+ .chat-voice-record-button {
700
+ width: 40px;
701
+ height: 40px;
702
+ border-radius: 24px;
703
+ margin: 10px;
704
+ margin-left: 0;
634
705
  font-size: 18px;
635
- letter-spacing: 0.05em;
636
- font-weight: 600;
706
+ line-height: 24px;
707
+ outline: none !important;
708
+ position: relative;
709
+ cursor: pointer;
637
710
  overflow: hidden;
638
- text-overflow: ellipsis;
639
- white-space: nowrap; }
640
-
641
- .react-autoql-drawer .header-title {
642
- -webkit-animation: fadeIn 0.3s;
643
- animation: fadeIn 0.3s; }
711
+ background: var(--react-autoql-accent-color);
712
+ color: white;
713
+ border: none;
714
+ flex-shrink: 0;
715
+ flex-grow: 0; }
644
716
 
645
- .react-autoql-drawer .react-autoql-header-left-container {
646
- width: 100px; }
717
+ .chat-voice-record-button:hover {
718
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
647
719
 
648
- .react-autoql-drawer .react-autoql-drawer-header-btn {
649
- line-height: 1em;
650
- font-weight: normal;
651
- float: none;
652
- opacity: 1; }
653
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
654
- width: 30px;
655
- height: 30px;
656
- padding-top: 3px; }
657
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
658
- position: absolute;
659
- right: 10px;
660
- -webkit-animation: fadeIn 0.3s;
661
- animation: fadeIn 0.3s; }
662
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
663
- width: 28px;
664
- height: 28px;
665
- padding-top: 7px;
666
- box-sizing: border-box; }
720
+ .chat-voice-record-button.listening {
721
+ background: #ff471a; }
667
722
 
668
- .react-autoql-drawer .chat-message-container {
669
- scroll-behavior: smooth !important;
670
- max-height: calc(100% - 140px);
671
- overflow-y: auto;
672
- overflow-x: hidden;
673
- flex: 1; }
674
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
675
- overflow-x: hidden !important;
676
- margin-bottom: 0 !important; }
723
+ .chat-voice-record-icon {
724
+ vertical-align: top; }
677
725
 
678
- .react-autoql-drawer .chat-bar-container {
679
- position: relative;
680
- padding: 10px;
681
- padding-top: 30px; }
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; }
682
732
 
683
- .react-autoql-drawer .chat-drawer-chat-bar {
684
- flex-shrink: 0;
685
- flex-grow: 0;
686
- height: 60px;
687
- -webkit-animation: fadeIn 0.3s;
688
- animation: fadeIn 0.3s; }
733
+ @-webkit-keyframes slide {
734
+ 0% {
735
+ transform: translateX(-100%); }
736
+ 100% {
737
+ transform: translateX(100%); } }
689
738
 
690
- .react-autoql-drawer .watermark {
691
- color: var(--react-autoql-text-color-primary);
692
- text-align: center;
693
- opacity: 0.2;
694
- top: 6px;
695
- width: calc(100% - 10px);
696
- font-size: 13px; }
739
+ @keyframes slide {
740
+ 0% {
741
+ transform: translateX(-100%); }
742
+ 100% {
743
+ transform: translateX(100%); } }
697
744
 
698
- .react-autoql-drawer .condition-list-container {
699
- position: absolute;
700
- border: 1px solid var(--react-autoql-text-color-primary);
701
- border-radius: 100rem;
702
- background-color: transparent;
703
- color: var(--react-autoql-text-color-primary);
704
- padding: 0 5px 0 5px;
705
- transition: background-color 250ms ease, box-shadow 250ms ease;
706
- z-index: 9999999;
707
- width: -webkit-fit-content;
708
- width: -moz-fit-content;
709
- width: fit-content;
710
- height: -webkit-fit-content;
711
- height: -moz-fit-content;
712
- height: fit-content; }
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%; } }
713
757
 
714
- .condition-list-display {
715
- display: none;
716
- background-color: var(--react-autoql-background-color-primary);
717
- border-radius: 4px;
718
- padding: 5px;
719
- width: -webkit-fit-content;
720
- width: -moz-fit-content;
721
- width: fit-content;
722
- height: -webkit-fit-content;
723
- height: -moz-fit-content;
724
- height: fit-content;
725
- padding: 10px;
726
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
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%; } }
727
770
 
728
- .react-autoql-drawer .react-autoql-drawer:focus {
729
- outline: none; }
771
+ .react-autoql-bar-container {
772
+ position: relative;
773
+ display: flex;
774
+ flex-direction: row; }
730
775
 
731
- .react-autoql-drawer .chat-header-container button {
732
- background: transparent;
733
- border: none;
734
- color: white;
776
+ .react-autoql-chatbar-input {
777
+ padding: 10px;
778
+ padding-left: 20px;
735
779
  margin: 10px;
736
- margin-right: 0;
737
- font-size: 20px;
738
- cursor: pointer;
739
- outline: none !important; }
780
+ height: 42px;
781
+ box-sizing: border-box;
782
+ border-radius: 24px;
783
+ font-size: 16px;
784
+ font-family: inherit;
785
+ letter-spacing: 0.04em;
786
+ outline: none !important;
787
+ width: calc(100% - 20px);
788
+ font-family: inherit;
789
+ /* Default styles outside of data messenger */
790
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
791
+ background: var(--react-autoql-background-color-primary);
792
+ color: #5d5d5d; }
740
793
 
741
- .react-autoql-drawer .chat-header-container button:hover {
742
- opacity: 0.7; }
794
+ .react-autoql-chatbar-input.left-padding {
795
+ padding-left: 54px; }
743
796
 
744
- .react-autoql-drawer .chat-header-container button svg {
745
- width: 35px;
746
- height: 35px; }
797
+ .react-autoql-chatbar-input:disabled {
798
+ background: rgba(0, 0, 0, 0.03); }
747
799
 
748
- .topics-container {
749
- margin: 5px 0; }
800
+ .react-autoql-chatbar-input:not(:disabled):hover {
801
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
750
802
 
751
- .intro-qi-link {
752
- cursor: pointer;
753
- color: var(--react-autoql-accent-color); }
803
+ .react-autoql-chatbar-input::-moz-placeholder {
804
+ /* Default color outside of data messenger */
805
+ color: #999 !important; }
754
806
 
755
- /* custom scrollbar */
756
- .react-autoql-drawer .chat-message-container > div:last-child {
757
- opacity: 0;
758
- transition: opacity 200ms ease; }
807
+ .react-autoql-chatbar-input:-ms-input-placeholder {
808
+ /* Default color outside of data messenger */
809
+ color: #999 !important; }
759
810
 
760
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
761
- opacity: 1; }
811
+ .react-autoql-chatbar-input::placeholder {
812
+ /* Default color outside of data messenger */
813
+ color: #999 !important; }
762
814
 
763
- /* rc-drawer */
764
- .react-autoql-drawer .drawer-content {
765
- background: white;
766
- border-radius: 4px;
767
- overflow: visible;
768
- opacity: 1;
769
- transition: opacity 0.3s ease; }
815
+ /* autosuggest */
816
+ .react-autoql-bar-container .react-autosuggest__container,
817
+ .react-autoql-chatbar-input-container {
818
+ position: relative;
819
+ flex: 1; }
770
820
 
771
- .react-autoql-drawer.closed .drawer-content {
772
- opacity: 0; }
821
+ .react-autoql-bar-container .react-autosuggest__input--focused {
822
+ outline: none; }
773
823
 
774
- .react-autoql-drawer .drawer-handle {
775
- transition: opacity 0.5s ease;
776
- overflow: hidden;
777
- width: 50px;
778
- height: 50px;
779
- border-radius: 50px !important;
780
- font-size: 22px; }
781
- .react-autoql-drawer .drawer-handle.default-logo {
782
- background-color: var(--react-autoql-accent-color, #26a7df);
783
- color: #fff; }
784
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
785
- position: absolute;
786
- vertical-align: top;
787
- top: 11px;
788
- left: 12px; }
789
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
790
- position: absolute;
791
- width: 26px;
792
- height: 26px; }
824
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
825
+ display: none; }
793
826
 
794
- .react-autoql-drawer.drawer-right .drawer-handle {
795
- left: -70px !important; }
827
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
828
+ display: none; }
796
829
 
797
- .react-autoql-drawer.drawer-left .drawer-handle {
798
- right: -60px !important; }
830
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
831
+ position: absolute;
832
+ top: 45px;
833
+ bottom: unset;
834
+ margin: 10px;
835
+ padding-top: 5px;
836
+ padding-bottom: 5px;
837
+ display: block;
838
+ width: calc(100% - 20px);
839
+ height: unset;
840
+ border-radius: 24px;
841
+ font-family: inherit;
842
+ font-size: 15px;
843
+ font-weight: normal;
844
+ z-index: 2;
845
+ overflow: hidden;
846
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
847
+ /* Default styles outside of data messenger */
848
+ background-color: white;
849
+ color: #5d5d5d; }
799
850
 
800
- .react-autoql-drawer.drawer-top .drawer-handle {
801
- bottom: -60px !important; }
851
+ .react-autoql-bar-container.autosuggest-top
852
+ .react-autosuggest__suggestions-container--open {
853
+ top: unset;
854
+ bottom: 45px; }
802
855
 
803
- .react-autoql-drawer.drawer-bottom .drawer-handle {
804
- top: -60px !important; }
856
+ .react-autoql-bar-container.autosuggest-bottom
857
+ .react-autosuggest__suggestions-container--open {
858
+ top: 45px;
859
+ bottom: unset; }
805
860
 
806
- .react-autoql-drawer .drawer-handle.hide {
807
- opacity: 0;
808
- visibility: hidden; }
861
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
862
+ margin: 0;
863
+ padding: 0;
864
+ list-style-type: none; }
809
865
 
810
- .react-autoql-drawer .drawer-handle-icon,
811
- .react-autoql-drawer .drawer-handle-icon::before,
812
- .react-autoql-drawer .drawer-handle-icon::after {
813
- background: var(--react-autoql-text-color-primary); }
866
+ /* Autocomplete styles */
867
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
868
+ background-color: var(--react-autoql-background-color-primary);
869
+ border: 1px solid var(--react-autoql-border-color);
870
+ color: var(--react-autoql-text-color-primary); }
814
871
 
815
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
816
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
817
- left: 0; }
872
+ .react-autoql-bar-container .react-autosuggest__suggestion {
873
+ color: var(--react-autoql-text-color-primary); }
818
874
 
819
- .react-autoql-drawer .drawer-content-wrapper {
820
- background: transparent; }
875
+ .react-autoql-chatbar-input {
876
+ border: 1px solid var(--react-autoql-border-color);
877
+ color: var(--react-autoql-text-color-primary); }
821
878
 
822
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
823
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
824
- max-width: calc(100vw - 45px) !important;
825
- min-width: 400px !important; }
879
+ .react-autoql-chatbar-input::-moz-placeholder {
880
+ color: var(--react-autoql-text-color-placeholder); }
826
881
 
827
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
828
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
829
- max-height: calc(100vh - 45px) !important;
830
- min-height: 400px !important; }
882
+ .react-autoql-chatbar-input:-ms-input-placeholder {
883
+ color: var(--react-autoql-text-color-placeholder); }
831
884
 
832
- .react-autoql-drawer-resize-handle {
833
- position: absolute;
834
- background: transparent; }
835
- .react-autoql-drawer-resize-handle.right {
836
- top: 0;
837
- left: -5px;
838
- width: 5px;
839
- height: 100vh;
840
- cursor: ew-resize; }
841
- .react-autoql-drawer-resize-handle.left {
842
- top: 0;
843
- right: -5px;
844
- width: 5px;
845
- height: 100vh;
846
- cursor: ew-resize; }
847
- .react-autoql-drawer-resize-handle.top {
848
- bottom: -5px;
849
- left: 0;
850
- height: 5px;
851
- width: 100vw;
852
- cursor: ns-resize; }
853
- .react-autoql-drawer-resize-handle.bottom {
854
- top: -5px;
855
- left: 0;
856
- height: 5px;
857
- width: 100vw;
858
- cursor: ns-resize; }
885
+ .react-autoql-chatbar-input::placeholder {
886
+ color: var(--react-autoql-text-color-placeholder); }
859
887
 
860
- .react-autoql-drawer .response-loading-container {
861
- position: absolute;
862
- bottom: 45px;
863
- left: 20px; }
888
+ .react-autoql-bar-container .react-autosuggest__suggestion {
889
+ cursor: pointer;
890
+ padding: 2px;
891
+ padding-left: 18px;
892
+ letter-spacing: 0.05em;
893
+ line-height: 22.5px; }
864
894
 
865
- /* Tooltips */
866
- .react-autoql-drawer-tooltip {
867
- font-family: var(--react-autoql-font-family), sans-serif;
868
- letter-spacing: 0.04em;
869
- padding: 7px 15px;
870
- transition: none;
871
- opacity: 1 !important;
872
- z-index: 99999 !important;
873
- /* necessary to show up on top of rc drawer */ }
895
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
896
+ background-color: rgba(0, 0, 0, 0.1) !important; }
874
897
 
875
- .interpretation-tooltip {
876
- font-family: var(--react-autoql-font-family), sans-serif;
898
+ .react-autoql-bar-container .react-autosuggest__section-title {
899
+ padding: 10px 0 0 10px;
877
900
  font-size: 12px;
878
- text-align: left;
879
- letter-spacing: 0.04em;
880
- padding: 7px 15px;
881
- max-width: 400px;
882
- opacity: 1 !important;
883
- transition: none;
884
- z-index: 99999 !important;
885
- /* necessary to show up on top of rc drawer */ }
886
-
887
- .react-autoql-condition-lock-menu {
888
- color: var(--react-autoql-text-color-primary);
889
- background: var(--react-autoql-background-color-primary); }
890
-
891
- .react-tiny-popover-container {
892
- z-index: 9999;
893
- border: 1px solid #ababab52;
894
- border-radius: 4px;
895
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
896
- transition: opacity 0.2s ease 0s !important; }
897
-
898
- .clear-messages-confirm-popover {
899
- color: var(--react-autoql-text-color-primary);
900
- background: var(--react-autoql-background-color-primary);
901
- text-align: right;
902
- padding: 18px;
903
- width: 266px; }
904
-
905
- .react-autoql-confirm-text {
906
- text-align: center; }
907
-
908
- .react-autoql-menu-text {
909
- text-align: center; }
910
- .react-autoql-menu-text:hover {
911
- color: var(--react-autoql-accent-color);
912
- cursor: pointer; }
901
+ color: #777; }
913
902
 
914
- .react-autoql-confirm-icon {
915
- color: #faad14 !important;
916
- vertical-align: middle;
917
- margin-right: 5px !important;
918
- margin-bottom: 3px; }
903
+ .input-response-loading-container {
904
+ position: absolute;
905
+ right: 23px;
906
+ top: -2px; }
919
907
 
920
- .data-messenger-tab-container {
908
+ .chat-bar-input-icon {
921
909
  position: absolute;
922
- background: transparent;
910
+ color: #28a8e0;
911
+ font-size: 20px;
912
+ left: 30px;
913
+ top: 15px; }
914
+
915
+ .react-autoql-response-content-container:not(.html-content) {
916
+ position: relative;
923
917
  display: flex;
918
+ flex-direction: column;
924
919
  justify-content: center;
925
920
  align-items: center;
926
- pointer-events: none; }
927
- .data-messenger-tab-container.right {
928
- height: 100vh;
929
- width: 60px;
930
- left: -60px; }
931
- .data-messenger-tab-container.left {
932
- height: 100vh;
933
- width: 60px;
934
- right: -60px; }
935
- .data-messenger-tab-container.top {
936
- width: 100vw;
937
- height: 60px;
938
- bottom: -60px; }
939
- .data-messenger-tab-container.bottom {
940
- width: 100vw;
941
- height: 60px;
942
- top: -60px; }
943
-
944
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
945
- .page-switcher-shadow-container {
946
- position: absolute;
947
- background: transparent;
948
- overflow: hidden; }
949
-
950
- .page-switcher-shadow-container.right {
951
- top: 80px;
952
- width: 60px; }
953
-
954
- .page-switcher-shadow-container.left {
955
- top: 80px;
956
- width: 60px; }
957
-
958
- /* Container holding the tabs */
959
- .page-switcher-container {
960
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
921
+ background-color: inherit;
922
+ font-size: 14px;
923
+ height: 100%;
924
+ width: 100%;
961
925
  overflow: hidden;
962
- box-sizing: border-box;
963
- display: flex;
964
- pointer-events: all; }
965
- .page-switcher-container .tab {
966
- position: relative;
967
- z-index: 1;
968
- background: var(--react-autoql-accent-color);
969
- color: #fff;
970
- opacity: 1;
971
- font-size: 22px;
972
- text-align: center;
973
- transform: translate(0, 0);
974
- cursor: pointer;
975
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
976
- transition-duration: 0.2s; }
977
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
978
- height: 22px;
979
- width: 23px; }
980
- .page-switcher-container.right {
981
- border-top-left-radius: 5px;
982
- border-bottom-left-radius: 5px;
983
- margin-top: 20px;
984
- margin-left: 20px;
985
- margin-bottom: 20px;
986
- flex-direction: column; }
987
- .page-switcher-container.right .tab {
988
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
989
- .page-switcher-container.left {
990
- border-top-right-radius: 5px;
991
- border-bottom-right-radius: 5px;
992
- margin-top: 20px;
993
- margin-right: 20px;
994
- margin-bottom: 20px;
995
- margin-left: -5px;
996
- flex-direction: column; }
997
- .page-switcher-container.left .tab {
998
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
999
- .page-switcher-container.top {
1000
- border-bottom-right-radius: 5px;
1001
- border-bottom-left-radius: 5px;
1002
- margin-right: 20px;
1003
- margin-left: 20px;
1004
- margin-bottom: 20px;
1005
- flex-direction: row;
1006
- height: 40px; }
1007
- .page-switcher-container.top .tab {
1008
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
1009
- .page-switcher-container.bottom {
1010
- border-top-left-radius: 5px;
1011
- border-top-right-radius: 5px;
1012
- margin-top: 20px;
1013
- margin-left: 20px;
1014
- margin-right: 20px;
1015
- flex-direction: row;
1016
- height: 40px; }
1017
- .page-switcher-container.bottom .tab {
1018
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
1019
-
1020
- /* Individual Tabs */
1021
- .page-switcher-container .tab {
1022
- display: flex;
1023
- justify-content: center;
1024
- align-items: center; }
1025
-
1026
- .data-messenger-notification-btn {
1027
- display: flex;
1028
- flex-direction: column;
1029
- justify-content: flex-start;
1030
- line-height: inherit; }
1031
-
1032
- .page-switcher-container.right .tab,
1033
- .page-switcher-container.left .tab {
1034
- height: 65px; }
1035
-
1036
- .page-switcher-container.top .tab,
1037
- .page-switcher-container.bottom .tab {
1038
- width: 65px; }
1039
-
1040
- .page-switcher-container.bottom .tab {
1041
- background: var(--react-autoql-background-color-secondary);
1042
926
  color: var(--react-autoql-text-color-primary); }
1043
927
 
1044
- .page-switcher-container .tab.active {
1045
- background: var(--react-autoql-background-color-secondary);
1046
- color: var(--react-autoql-text-color-primary);
1047
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1048
- font-weight: bold;
928
+ .react-autoql-response-content-container.html-content {
1049
929
  position: relative;
1050
- z-index: 2; }
1051
-
1052
- .page-switcher-container.bottom .tab.active {
1053
- background: var(--react-autoql-accent-color);
1054
- color: #fff;
1055
- font-weight: bold; }
930
+ background-color: inherit;
931
+ text-align: left;
932
+ font-size: 14px;
933
+ height: 100%;
934
+ width: 100%;
935
+ overflow: hidden;
936
+ color: var(--react-autoql-text-color-primary); }
937
+ .react-autoql-response-content-container.html-content table th {
938
+ border-bottom: 2px solid var(--react-autoql-border-color); }
939
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
940
+ border-bottom: 1px solid var(--react-autoql-border-color); }
941
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
942
+ border-right: 1px solid var(--react-autoql-border-color); }
943
+ .react-autoql-response-content-container.html-content table th,
944
+ .react-autoql-response-content-container.html-content table td {
945
+ padding: 5px 10px; }
946
+ .react-autoql-response-content-container.html-content * {
947
+ font-size: inherit; }
948
+ .react-autoql-response-content-container.html-content sup,
949
+ .react-autoql-response-content-container.html-content sub {
950
+ font-size: 10px; }
951
+ .react-autoql-response-content-container.html-content > *:first-child {
952
+ margin-top: 0 !important; }
953
+ .react-autoql-response-content-container.html-content > *:last-child {
954
+ margin-bottom: 0 !important; }
955
+ .react-autoql-response-content-container.html-content caption {
956
+ display: table-caption;
957
+ text-align: -webkit-center;
958
+ padding-top: unset;
959
+ padding-bottom: unset;
960
+ color: unset;
961
+ text-align: unset;
962
+ caption-side: unset; }
1056
963
 
1057
- /* animations */
1058
- @-webkit-keyframes response-loading1 {
1059
- 0% {
1060
- transform: scale(0); }
1061
- 100% {
1062
- transform: scale(1); } }
1063
- @keyframes response-loading1 {
1064
- 0% {
1065
- transform: scale(0); }
1066
- 100% {
1067
- transform: scale(1); } }
964
+ .react-autoql-response-content-container.table {
965
+ max-height: 100vh !important;
966
+ overflow-y: scroll;
967
+ scrollbar-width: none; }
1068
968
 
1069
- @-webkit-keyframes response-loading3 {
1070
- 0% {
1071
- transform: scale(1); }
1072
- 100% {
1073
- transform: scale(0); } }
969
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
970
+ width: 0;
971
+ height: 0; }
1074
972
 
1075
- @keyframes response-loading3 {
1076
- 0% {
1077
- transform: scale(1); }
1078
- 100% {
1079
- transform: scale(0); } }
973
+ .react-autoql-suggestion-btn {
974
+ padding: 6px 14px;
975
+ background: transparent;
976
+ font-family: inherit;
977
+ font-size: 12px;
978
+ margin-bottom: 5px;
979
+ outline: none !important;
980
+ cursor: pointer;
981
+ letter-spacing: 0.05em;
982
+ transition: all 0.1s ease;
983
+ border: 1px solid rgba(0, 0, 0, 0.15);
984
+ border-radius: 5px;
985
+ color: inherit; }
1080
986
 
1081
- @-webkit-keyframes response-loading2 {
1082
- 0% {
1083
- transform: translate(0, 0); }
1084
- 100% {
1085
- transform: translate(19px, 0); } }
987
+ .react-autoql-suggestion-btn:hover {
988
+ border-color: transparent;
989
+ color: white;
990
+ background: var(--react-autoql-accent-color); }
1086
991
 
1087
- @keyframes response-loading2 {
1088
- 0% {
1089
- transform: translate(0, 0); }
1090
- 100% {
1091
- transform: translate(19px, 0); } }
992
+ .react-autoql-help-link-btn {
993
+ padding: 6px 14px;
994
+ background: transparent;
995
+ border-radius: 5px;
996
+ font-family: inherit;
997
+ font-size: 12px;
998
+ margin-top: 5px;
999
+ outline: none !important;
1000
+ cursor: pointer;
1001
+ letter-spacing: 0.05em;
1002
+ transition: all 0.1s ease;
1003
+ border-color: #e2e2e26e;
1004
+ color: inherit; }
1092
1005
 
1093
- @-webkit-keyframes scale-up-center {
1094
- 0% {
1095
- transform: scale(0); }
1096
- 100% {
1097
- transform: scale(1); } }
1006
+ .react-autoql-help-link-btn:hover {
1007
+ opacity: 0.7; }
1098
1008
 
1099
- @keyframes scale-up-center {
1100
- 0% {
1101
- transform: scale(0); }
1102
- 100% {
1103
- transform: scale(1); } }
1009
+ .react-autoql-help-link-icon {
1010
+ width: 15px;
1011
+ height: 15px;
1012
+ margin-bottom: -3px;
1013
+ margin-right: 3px; }
1104
1014
 
1105
- @-webkit-keyframes fadeIn {
1106
- 0% {
1107
- opacity: 0; }
1108
- 100% {
1109
- opacity: 1; } }
1015
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1016
+ color: var(--react-autoql-success-color); }
1110
1017
 
1111
- @keyframes fadeIn {
1112
- 0% {
1113
- opacity: 0; }
1114
- 100% {
1115
- opacity: 1; } }
1018
+ .react-autoql-suggestion-message {
1019
+ height: 100%;
1020
+ width: 100%;
1021
+ word-break: break-word; }
1116
1022
 
1117
- @-webkit-keyframes slideDown {
1118
- 0% {
1119
- transform: translateY(-100%); }
1120
- 100% {
1121
- transform: translateY(0%); } }
1122
-
1123
- @keyframes slideDown {
1124
- 0% {
1125
- transform: translateY(-100%); }
1126
- 100% {
1127
- transform: translateY(0%); } }
1023
+ .react-autoql-suggestions-select {
1024
+ position: relative;
1025
+ display: inline-block;
1026
+ height: 30px;
1027
+ background: none;
1028
+ outline: none !important;
1029
+ border: 1px solid;
1030
+ font-family: inherit;
1031
+ letter-spacing: 0.05em;
1032
+ color: #28a8e0;
1033
+ cursor: pointer;
1034
+ font-size: inherit; }
1128
1035
 
1129
- @-webkit-keyframes snackbarFadein {
1130
- from {
1131
- top: 30px;
1132
- opacity: 0; }
1133
- to {
1134
- top: 60px;
1135
- opacity: 1; } }
1036
+ .no-columns-error-message {
1037
+ position: absolute;
1038
+ height: 100%;
1039
+ width: 100%;
1040
+ display: flex;
1041
+ justify-content: center;
1042
+ flex-direction: column;
1043
+ text-align: center;
1044
+ padding: 20px;
1045
+ font-size: 13px; }
1046
+ .no-columns-error-message .warning-icon {
1047
+ font-size: 22px;
1048
+ display: block;
1049
+ margin-bottom: -13px;
1050
+ text-align: center; }
1051
+ .no-columns-error-message .eye-icon {
1052
+ vertical-align: bottom;
1053
+ line-height: 18px; }
1136
1054
 
1137
- @keyframes snackbarFadein {
1138
- from {
1139
- top: 30px;
1140
- opacity: 0; }
1141
- to {
1142
- top: 60px;
1143
- opacity: 1; } }
1055
+ /* query validation */
1056
+ .react-autoql-query-validation-selector-container {
1057
+ display: inline-block;
1058
+ position: relative; }
1144
1059
 
1145
- @-webkit-keyframes snackbarFadeout {
1146
- from {
1147
- top: 60px;
1148
- opacity: 1; }
1149
- to {
1150
- top: 30px;
1151
- opacity: 0; } }
1060
+ .react-autoql-select-popup-container.query-validation-select {
1061
+ padding: 5px 0;
1062
+ letter-spacing: 0.03em;
1063
+ font-family: var(--react-autoql-font-family), sans-serif; }
1064
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1065
+ height: unset;
1066
+ font-size: 14px;
1067
+ line-height: 24px;
1068
+ padding: 0 15px; }
1069
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1070
+ color: #d84830; }
1152
1071
 
1153
- @keyframes snackbarFadeout {
1154
- from {
1155
- top: 60px;
1156
- opacity: 1; }
1157
- to {
1158
- top: 30px;
1159
- opacity: 0; } }
1072
+ .react-autoql-query-validation-query {
1073
+ text-align: center; }
1160
1074
 
1161
- .react-autoql-dashboard-container {
1162
- background: var(--react-autoql-background-color-secondary);
1163
- height: 100%;
1075
+ .react-autoql-query-validation-execute-btn {
1076
+ height: 38px;
1077
+ background: none;
1078
+ border-radius: 4px;
1079
+ margin-top: 24px;
1164
1080
  width: 100%;
1165
- overflow: hidden; }
1166
-
1167
- .react-autoql-dashboard-container.edit-mode {
1168
- padding-bottom: 200px; }
1081
+ color: inherit;
1082
+ cursor: pointer;
1083
+ outline: none !important;
1084
+ border-color: #e2e2e26e;
1085
+ transition: all 0.2s ease; }
1169
1086
 
1170
- .dashboard-drilldown-modal .ReactModal__Content {
1171
- top: unset !important;
1172
- margin-top: 20px !important;
1173
- max-height: 93vh !important; }
1087
+ .react-autoql-query-validation-execute-btn:hover {
1088
+ border-color: #28a8e0; }
1174
1089
 
1175
- .dashboard-drilldown-modal .react-autoql-modal-body {
1176
- padding: 0; }
1090
+ .react-autoql-execute-query-icon {
1091
+ font-size: 16px;
1092
+ vertical-align: middle !important;
1093
+ padding-right: 3px !important; }
1094
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
1095
+ height: 19px;
1096
+ width: 19px;
1097
+ margin-top: 3px;
1098
+ margin-right: 4px;
1099
+ vertical-align: top;
1100
+ fill: var(--react-autoql-accent-color); }
1177
1101
 
1178
- .dashboard-drilldown-modal .react-autoql-table {
1179
- opacity: 0.9;
1180
- font-size: 11px; }
1102
+ .react-autoql-query-validation-select {
1103
+ position: relative;
1104
+ display: inline-block;
1105
+ height: 2em;
1106
+ background: none;
1107
+ outline: none !important;
1108
+ border: none;
1109
+ letter-spacing: 0.05em;
1110
+ font-family: inherit;
1111
+ font-size: inherit;
1112
+ margin: 0;
1113
+ padding: 0;
1114
+ border-radius: 0;
1115
+ border-bottom: 1px dashed;
1116
+ color: var(--react-autoql-accent-color); }
1181
1117
 
1182
- .dashboard-drilldown-modal .splitter-layout {
1183
- height: calc(100% - 55px); }
1118
+ .react-autoql-query-validation-delete-button {
1119
+ position: relative;
1120
+ cursor: pointer;
1121
+ margin-bottom: -2px; }
1184
1122
 
1185
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
- padding: 20px;
1187
- padding-bottom: 10px; }
1123
+ .react-autoql-chart-tooltip {
1124
+ font-family: var(--react-autoql-font-family), sans-serif;
1125
+ letter-spacing: 0.04em;
1126
+ line-height: 22px;
1127
+ font-size: 13px;
1128
+ padding: 7px 15px;
1129
+ transition: all 0.2s ease !important;
1130
+ text-align: left !important;
1131
+ opacity: 1 !important;
1132
+ z-index: 99999 !important;
1133
+ /* necessary to show up on top of rc drawer */ }
1188
1134
 
1189
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1190
- text-align: right;
1191
- width: 100%;
1192
- padding-right: 20px; }
1193
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1194
- position: absolute;
1195
- bottom: 5px;
1196
- width: 100px;
1197
- right: 0; }
1198
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1199
- padding-top: 10px;
1200
- margin-bottom: -8px; }
1135
+ .single-value-response {
1136
+ color: inherit;
1137
+ cursor: unset; }
1138
+ .single-value-response:hover {
1139
+ color: inherit; }
1201
1140
 
1202
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
- padding: 20px;
1204
- padding-top: 10px;
1205
- overflow: hidden;
1206
- height: 100%; }
1141
+ .single-value-response.with-drilldown:hover {
1142
+ color: inherit;
1143
+ text-decoration: underline;
1144
+ font-weight: 600;
1145
+ cursor: pointer; }
1207
1146
 
1208
- .empty-dashboard-message-container {
1209
- font-family: var(--react-autoql-font-family);
1210
- color: var(--react-autoql-text-color-primary);
1211
- letter-spacing: 0.02em;
1212
- text-align: center;
1213
- padding: 100px;
1214
- height: 100%;
1147
+ .react-autoql-query-validation-container {
1215
1148
  width: 100%; }
1216
1149
 
1217
- .empty-dashboard-new-tile-btn {
1218
- color: var(--react-autoql-accent-color);
1219
- font-weight: bold;
1220
- cursor: pointer; }
1221
-
1222
- .notification-rule-outer-container {
1223
- position: relative;
1224
- border: 1px solid transparent;
1225
- border-radius: 4px;
1226
- padding-bottom: 5px; }
1150
+ .react-autoql-query-validation-description {
1151
+ margin-bottom: 14px; }
1227
1152
 
1228
- .expression-error-message {
1229
- padding-left: 5px; }
1153
+ .context-menu {
1154
+ background: var(--react-autoql-background-color-primary);
1155
+ /* height: 100px; */
1156
+ width: 150px;
1157
+ padding: 10px 0; }
1230
1158
 
1231
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
- border: none; }
1159
+ .context-menu-list {
1160
+ list-style-type: none;
1161
+ width: 100%;
1162
+ margin: 0;
1163
+ padding: 0; }
1233
1164
 
1234
- .notification-list-loading-container {
1235
- text-align: center;
1236
- padding-top: 100px;
1165
+ .context-menu-list li {
1237
1166
  color: var(--react-autoql-text-color-primary);
1238
- height: 100%;
1239
- overflow: hidden;
1240
- background: var(--react-autoql-background-color-secondary); }
1167
+ width: 100%;
1168
+ height: 35px;
1169
+ line-height: 35px;
1170
+ padding: 0 20px;
1171
+ cursor: pointer; }
1241
1172
 
1242
- .empty-notifications-message {
1243
- color: var(--react-autoql-text-color-primary);
1244
- text-align: center;
1245
- margin-top: 75px; }
1246
- .empty-notifications-message div {
1247
- opacity: 0.6; }
1248
- .empty-notifications-message .empty-notifications-title {
1249
- font-size: 16px;
1250
- font-weight: bold;
1251
- margin-bottom: 5px; }
1252
- .empty-notifications-message .empty-notifications-img {
1253
- width: 250px;
1254
- height: 250px; }
1173
+ .context-menu-list li:hover {
1174
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1255
1175
 
1256
- .react-autoql-notification-list-container {
1257
- height: 100%;
1258
- padding: 20px;
1259
- overflow-y: auto;
1260
- background: var(--react-autoql-background-color-secondary); }
1176
+ .react-autoql-icon {
1177
+ position: relative;
1178
+ opacity: 1; }
1179
+ .react-autoql-icon.warning {
1180
+ color: var(--react-autoql-warning-color) !important; }
1181
+ .react-autoql-icon.danger {
1182
+ color: var(--react-autoql-danger-color) !important; }
1261
1183
 
1262
- .react-autoql-notification-dismiss-all {
1263
- text-align: right;
1264
- margin-bottom: 12px;
1265
- padding-right: 10px;
1266
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1267
- transition: color 0.1s ease; }
1268
- .react-autoql-notification-dismiss-all span {
1269
- opacity: 0.8;
1270
- cursor: pointer; }
1271
- .react-autoql-notification-dismiss-all span:hover {
1272
- opacity: 1; }
1273
-
1274
- .react-autoql-notification-display-name-input {
1275
- width: 100%; }
1276
-
1277
- .react-autoql-notification-message-input {
1278
- width: 100%; }
1279
-
1280
- .react-autoql-notification-list-item:nth-of-type(0) {
1281
- -webkit-animation-delay: 0s;
1282
- animation-delay: 0s; }
1283
-
1284
- .react-autoql-notification-list-item:nth-of-type(1) {
1285
- -webkit-animation-delay: 0.1s;
1286
- animation-delay: 0.1s; }
1287
-
1288
- .react-autoql-notification-list-item:nth-of-type(2) {
1289
- -webkit-animation-delay: 0.2s;
1290
- animation-delay: 0.2s; }
1291
-
1292
- .react-autoql-notification-list-item:nth-of-type(3) {
1293
- -webkit-animation-delay: 0.3s;
1294
- animation-delay: 0.3s; }
1295
-
1296
- .react-autoql-notification-list-item:nth-of-type(4) {
1297
- -webkit-animation-delay: 0.4s;
1298
- animation-delay: 0.4s; }
1299
-
1300
- .react-autoql-notification-list-item:nth-of-type(5) {
1301
- -webkit-animation-delay: 0.5s;
1302
- animation-delay: 0.5s; }
1303
-
1304
- .react-autoql-notification-list-item:nth-of-type(6) {
1305
- -webkit-animation-delay: 0.6s;
1306
- animation-delay: 0.6s; }
1307
-
1308
- .react-autoql-notification-list-item:nth-of-type(7) {
1309
- -webkit-animation-delay: 0.7s;
1310
- animation-delay: 0.7s; }
1311
-
1312
- .react-autoql-notification-list-item:nth-of-type(8) {
1313
- -webkit-animation-delay: 0.8s;
1314
- animation-delay: 0.8s; }
1315
-
1316
- .react-autoql-notification-list-item:nth-of-type(9) {
1317
- -webkit-animation-delay: 0.9s;
1318
- animation-delay: 0.9s; }
1319
-
1320
- .react-autoql-notification-list-item:nth-of-type(10) {
1321
- -webkit-animation-delay: 1s;
1322
- animation-delay: 1s; }
1323
-
1324
- @-webkit-keyframes slideIn {
1325
- 0% {
1326
- opacity: 0;
1327
- top: 500px; }
1328
- 100% {
1184
+ span.react-autoql-icon {
1185
+ vertical-align: unset;
1186
+ text-align: left;
1187
+ margin: 0;
1188
+ padding: 0;
1189
+ float: none !important;
1190
+ color: inherit; }
1191
+ span.react-autoql-icon svg {
1192
+ float: none !important;
1193
+ color: inherit;
1194
+ vertical-align: unset;
1195
+ text-align: left;
1196
+ margin: 0;
1197
+ padding: 0;
1329
1198
  opacity: 1;
1330
- top: 0; } }
1331
-
1332
- .notification-modal-content .react-autoql-step-content p {
1333
- margin-bottom: 0.5em;
1334
- margin-top: 0.5em;
1335
- padding-left: 8px; }
1336
-
1337
- .notification-modal-content .step-btn-container {
1338
- text-align: right;
1339
- display: flex;
1340
- min-height: 50px; }
1341
-
1342
- .expression-valid-checkmark.react-autoql-icon svg {
1343
- color: var(--react-autoql-success-color); }
1344
-
1345
- .expression-invalid-message-container {
1346
- max-width: 75%;
1347
- float: left;
1348
- text-align: left !important;
1349
- display: flex;
1350
- flex-direction: row;
1351
- align-items: left;
1352
- justify-content: left; }
1353
-
1354
- .expression-invalid-message {
1355
- color: var(--react-autoql-danger-color);
1356
- display: 'inline-block'; }
1199
+ height: 1em;
1200
+ margin-bottom: -0.1em; }
1357
1201
 
1358
- .react-autoql-notifications-button-container {
1359
- position: relative;
1202
+ .slack-logo {
1360
1203
  display: inline-block;
1361
- font-size: inherit;
1362
- line-height: 1em;
1363
- width: 1em; }
1364
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1365
- font-size: 1em;
1366
- line-height: 0;
1367
- vertical-align: bottom; }
1368
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1369
- position: absolute;
1370
- border: 2px solid #fff;
1371
- background: #f5222d;
1372
- border-radius: 6.3em;
1373
- line-height: 1.3em;
1374
- left: 0.6em;
1375
- top: -0.8em;
1376
- padding: 0.15em 0.5em;
1377
- text-align: center;
1378
- color: white;
1379
- font-size: 0.5em; }
1380
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1381
- position: absolute;
1382
- display: inline-block;
1383
- border: 2px solid #fff;
1384
- background: #f5222d;
1385
- border-radius: 50%;
1386
- height: 0.6em;
1387
- width: 0.6em;
1388
- left: 0.5em;
1389
- top: -2px; }
1204
+ height: 100%;
1205
+ margin-bottom: 3px; }
1206
+ .slack-logo img {
1207
+ vertical-align: middle;
1208
+ height: 1em;
1209
+ width: 1em; }
1210
+
1211
+ .react-autoql-badge {
1212
+ position: absolute;
1213
+ background: var(--react-autoql-warning-color);
1214
+ border: 1px solid var(--react-autoql-background-color-primary);
1215
+ width: 0.5em;
1216
+ height: 0.5em;
1217
+ top: -0.1em;
1218
+ right: -0.25em;
1219
+ border-radius: 50%;
1220
+ box-sizing: content-box; }
1390
1221
 
1391
1222
  .notification-rule-add-btn-outer,
1392
1223
  .notification-rule-validate-btn-outer {
@@ -1418,163 +1249,43 @@ span.react-autoql-icon {
1418
1249
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1419
1250
  border: none; }
1420
1251
 
1421
- .react-autoql-notification-settings {
1422
- background-color: var(--react-autoql-background-color-secondary);
1423
- color: var(--react-autoql-text-color-primary);
1424
- padding-top: 20px;
1425
- height: 100%; }
1426
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1427
- margin: 20px;
1428
- margin-top: 10px;
1429
- border-radius: 4px;
1430
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1431
- background-color: var(--react-autoql-background-color-primary);
1432
- overflow: hidden; }
1433
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1434
- height: 55px;
1435
- line-height: 55px;
1436
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1437
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1438
- margin-right: 10px;
1439
- cursor: pointer; }
1440
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1441
- padding-right: 20px;
1442
- font-size: 17px;
1443
- opacity: 1;
1444
- cursor: pointer;
1445
- color: var(--react-autoql-accent-color); }
1446
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1447
- background: rgba(0, 0, 0, 0.01); }
1448
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1449
- opacity: 0;
1450
- margin-right: 20px;
1451
- font-size: 16px;
1452
- transition: all 0.2s ease;
1453
- color: var(--react-autoql-text-color-primary);
1454
- cursor: pointer; }
1455
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1456
- color: var(--react-autoql-accent-color);
1457
- opacity: 1 !important; }
1458
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1459
- opacity: 0.5; }
1460
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1461
- display: flex;
1462
- justify-content: space-between;
1463
- height: 56px;
1464
- padding-left: 25px;
1465
- padding-right: 8px;
1466
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1467
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1468
- margin-bottom: 4px;
1469
- margin-right: 8px; }
1470
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1471
- margin-bottom: 4px;
1472
- margin-right: 8px;
1473
- opacity: 0.5;
1474
- pointer-events: none; }
1475
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1476
- display: flex;
1477
- justify-content: space-between;
1478
- align-items: center;
1479
- padding: 5px 20px;
1480
- padding-bottom: 0;
1481
- color: var(--react-autoql-text-color-primary); }
1482
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1483
- display: inline-block;
1484
- height: 35px;
1485
- width: 35px;
1486
- border-radius: 20px;
1487
- background: var(--react-autoql-accent-color, #26a7df);
1488
- color: white;
1489
- line-height: 38px;
1490
- text-align: center;
1491
- font-size: 20px;
1492
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1493
- transition: all 0.2s ease;
1494
- margin-right: 5px;
1495
- cursor: pointer; }
1496
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1497
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1498
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1499
- white-space: nowrap;
1500
- overflow: hidden;
1501
- text-overflow: ellipsis;
1502
- padding-right: 10px; }
1503
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1504
- opacity: 0.5; }
1505
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1506
- vertical-align: middle;
1507
- margin-bottom: 4px;
1508
- height: 18px; }
1509
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1510
- display: flex;
1511
- align-items: center;
1512
- margin-top: -25px; }
1513
-
1514
- .react-autoql-step-container a {
1515
- color: var(--react-autoql-accent-color, #26a7df); }
1516
-
1517
- .frequency-date-select-container {
1518
- margin-top: 10px; }
1519
-
1520
- .notification-frequency-step {
1521
- display: flex; }
1522
- .notification-frequency-step .frequency-category-select {
1523
- position: relative;
1524
- padding-top: 9px; }
1525
- .notification-frequency-step .notification-frequency-select {
1526
- margin-left: 8px; }
1527
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1528
- line-height: 33px; }
1529
- .notification-frequency-step .frequency-repeat-follow-text {
1530
- line-height: 32px;
1531
- vertical-align: top; }
1532
- .notification-frequency-step .frequency-settings-container {
1533
- flex: 0 1 400px; }
1534
-
1535
- .schedule-builder-timezone-section {
1536
- margin: 10px 5px; }
1537
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1538
- display: inline-block;
1539
- width: 300px; }
1540
-
1541
- .react-autoql-notification-list-item {
1542
- display: flex;
1543
- flex-direction: column;
1544
- flex-basis: auto;
1545
- --accent-color: #26a7df;
1546
- position: relative;
1547
- overflow: hidden;
1548
- background: var(--react-autoql-background-color-primary, #fff);
1549
- border-radius: 4px;
1550
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1551
- margin-bottom: 8px;
1552
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1553
- font-family: var(--react-autoql-font-family), sans-serif;
1554
- transition: all 1s ease;
1555
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1556
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1557
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1558
- -webkit-animation-fill-mode: both;
1559
- animation-fill-mode: both;
1560
- -webkit-animation-delay: 0s;
1561
- animation-delay: 0s; }
1562
- .react-autoql-notification-list-item .single-value-response {
1563
- font-size: 32px;
1564
- margin-top: -6px;
1565
- opacity: 0.9; }
1566
- .react-autoql-notification-list-item .viz-toolbar {
1567
- position: relative;
1568
- border: none; }
1569
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1570
- height: 33px; }
1571
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1572
- font-weight: 600;
1573
- padding-top: 20px;
1574
- padding-bottom: 5px; }
1575
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1576
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1577
- .react-autoql-notification-list-item .react-autoql-notification-details {
1252
+ .react-autoql-notification-list-item {
1253
+ display: flex;
1254
+ flex-direction: column;
1255
+ flex-basis: auto;
1256
+ --accent-color: #26a7df;
1257
+ position: relative;
1258
+ overflow: hidden;
1259
+ background: var(--react-autoql-background-color-primary, #fff);
1260
+ border-radius: 4px;
1261
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1262
+ margin-bottom: 8px;
1263
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1264
+ font-family: var(--react-autoql-font-family), sans-serif;
1265
+ transition: all 1s ease;
1266
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1267
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1268
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1269
+ -webkit-animation-fill-mode: both;
1270
+ animation-fill-mode: both;
1271
+ -webkit-animation-delay: 0s;
1272
+ animation-delay: 0s; }
1273
+ .react-autoql-notification-list-item .single-value-response {
1274
+ font-size: 32px;
1275
+ margin-top: -6px;
1276
+ opacity: 0.9; }
1277
+ .react-autoql-notification-list-item .viz-toolbar {
1278
+ position: relative;
1279
+ border: none; }
1280
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1281
+ height: 33px; }
1282
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
1283
+ font-weight: 600;
1284
+ padding-top: 20px;
1285
+ padding-bottom: 5px; }
1286
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1287
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1288
+ .react-autoql-notification-list-item .react-autoql-notification-details {
1578
1289
  overflow: hidden; }
1579
1290
  .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1580
1291
  overflow: auto; }
@@ -1755,6 +1466,130 @@ span.react-autoql-icon {
1755
1466
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1756
1467
  margin-bottom: -1px; }
1757
1468
 
1469
+ .notification-list-loading-container {
1470
+ text-align: center;
1471
+ padding-top: 100px;
1472
+ color: var(--react-autoql-text-color-primary);
1473
+ height: 100%;
1474
+ overflow: hidden;
1475
+ background: var(--react-autoql-background-color-secondary); }
1476
+
1477
+ .empty-notifications-message {
1478
+ color: var(--react-autoql-text-color-primary);
1479
+ text-align: center;
1480
+ margin-top: 75px; }
1481
+ .empty-notifications-message div {
1482
+ opacity: 0.6; }
1483
+ .empty-notifications-message .empty-notifications-title {
1484
+ font-size: 16px;
1485
+ font-weight: bold;
1486
+ margin-bottom: 5px; }
1487
+ .empty-notifications-message .empty-notifications-img {
1488
+ width: 250px;
1489
+ height: 250px; }
1490
+
1491
+ .react-autoql-notification-list-container {
1492
+ height: 100%;
1493
+ padding: 20px;
1494
+ overflow-y: auto;
1495
+ background: var(--react-autoql-background-color-secondary); }
1496
+
1497
+ .react-autoql-notification-dismiss-all {
1498
+ text-align: right;
1499
+ margin-bottom: 12px;
1500
+ padding-right: 10px;
1501
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1502
+ transition: color 0.1s ease; }
1503
+ .react-autoql-notification-dismiss-all span {
1504
+ opacity: 0.8;
1505
+ cursor: pointer; }
1506
+ .react-autoql-notification-dismiss-all span:hover {
1507
+ opacity: 1; }
1508
+
1509
+ .react-autoql-notification-display-name-input {
1510
+ width: 100%; }
1511
+
1512
+ .react-autoql-notification-message-input {
1513
+ width: 100%; }
1514
+
1515
+ .react-autoql-notification-list-item:nth-of-type(0) {
1516
+ -webkit-animation-delay: 0s;
1517
+ animation-delay: 0s; }
1518
+
1519
+ .react-autoql-notification-list-item:nth-of-type(1) {
1520
+ -webkit-animation-delay: 0.1s;
1521
+ animation-delay: 0.1s; }
1522
+
1523
+ .react-autoql-notification-list-item:nth-of-type(2) {
1524
+ -webkit-animation-delay: 0.2s;
1525
+ animation-delay: 0.2s; }
1526
+
1527
+ .react-autoql-notification-list-item:nth-of-type(3) {
1528
+ -webkit-animation-delay: 0.3s;
1529
+ animation-delay: 0.3s; }
1530
+
1531
+ .react-autoql-notification-list-item:nth-of-type(4) {
1532
+ -webkit-animation-delay: 0.4s;
1533
+ animation-delay: 0.4s; }
1534
+
1535
+ .react-autoql-notification-list-item:nth-of-type(5) {
1536
+ -webkit-animation-delay: 0.5s;
1537
+ animation-delay: 0.5s; }
1538
+
1539
+ .react-autoql-notification-list-item:nth-of-type(6) {
1540
+ -webkit-animation-delay: 0.6s;
1541
+ animation-delay: 0.6s; }
1542
+
1543
+ .react-autoql-notification-list-item:nth-of-type(7) {
1544
+ -webkit-animation-delay: 0.7s;
1545
+ animation-delay: 0.7s; }
1546
+
1547
+ .react-autoql-notification-list-item:nth-of-type(8) {
1548
+ -webkit-animation-delay: 0.8s;
1549
+ animation-delay: 0.8s; }
1550
+
1551
+ .react-autoql-notification-list-item:nth-of-type(9) {
1552
+ -webkit-animation-delay: 0.9s;
1553
+ animation-delay: 0.9s; }
1554
+
1555
+ .react-autoql-notification-list-item:nth-of-type(10) {
1556
+ -webkit-animation-delay: 1s;
1557
+ animation-delay: 1s; }
1558
+
1559
+ @-webkit-keyframes slideIn {
1560
+ 0% {
1561
+ opacity: 0;
1562
+ top: 500px; }
1563
+ 100% {
1564
+ opacity: 1;
1565
+ top: 0; } }
1566
+
1567
+ .notification-modal-content .react-autoql-step-content p {
1568
+ margin-bottom: 0.5em;
1569
+ margin-top: 0.5em;
1570
+ padding-left: 8px; }
1571
+
1572
+ .notification-modal-content .step-btn-container {
1573
+ text-align: right;
1574
+ display: flex;
1575
+ min-height: 50px; }
1576
+
1577
+ .expression-valid-checkmark.react-autoql-icon svg {
1578
+ color: var(--react-autoql-success-color); }
1579
+
1580
+ .expression-invalid-message-container {
1581
+ max-width: 75%;
1582
+ float: left;
1583
+ text-align: left !important;
1584
+ display: flex;
1585
+ flex-direction: row;
1586
+ align-items: left;
1587
+ justify-content: left; }
1588
+
1589
+ .expression-invalid-message {
1590
+ color: var(--react-autoql-danger-color);
1591
+ display: 'inline-block'; }
1592
+
1758
1593
  .react-autoql-dashboard .react-grid-item {
1759
1594
  background: var(--react-autoql-background-color-primary, #fff);
1760
1595
  color: var(--react-autoql-text-color-primary, #404040);
@@ -2251,272 +2086,170 @@ span.react-autoql-icon {
2251
2086
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2252
2087
  background: inherit; }
2253
2088
 
2254
- .react-autoql-table-container {
2255
- height: 100%;
2256
- max-width: 100%;
2257
- background-color: inherit; }
2258
-
2259
- .react-autoql-table {
2260
- margin-bottom: 0; }
2261
-
2262
- /* tabulator */
2263
- .react-autoql-table.tabulator,
2264
- .react-autoql-table.tabulator .tabulator-row,
2265
- .react-autoql-table.tabulator .tabulator-header,
2266
- .react-autoql-table.tabulator .tabulator-headers,
2267
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2268
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2269
- background-color: inherit; }
2270
-
2271
- .react-autoql-table-container.supports-drilldown
2272
- .react-autoql-table.tabulator
2273
- .tabulator-row.tabulator-unselectable:hover {
2274
- cursor: pointer !important;
2275
- background-color: var(--react-autoql-hover-color) !important; }
2276
-
2277
- .react-autoql-table.tabulator
2278
- .tabulator-header
2279
- .tabulator-col.tabulator-sortable:hover {
2280
- background-color: var(--react-autoql-hover-color) !important; }
2281
-
2282
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2283
- .react-autoql-table.tabulator .tabulator-cell {
2284
- border-color: var(--react-autoql-border-color); }
2285
-
2286
- .react-autoql-table.tabulator .tabulator-header {
2287
- border-bottom: 2px solid var(--react-autoql-border-color); }
2288
-
2289
- .react-autoql-table.tabulator {
2290
- background-color: inherit;
2089
+ .react-autoql-notification-settings {
2090
+ background-color: var(--react-autoql-background-color-secondary);
2091
+ color: var(--react-autoql-text-color-primary);
2092
+ padding-top: 20px;
2291
2093
  height: 100%; }
2094
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
2095
+ margin: 20px;
2096
+ margin-top: 10px;
2097
+ border-radius: 4px;
2098
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2099
+ background-color: var(--react-autoql-background-color-primary);
2100
+ overflow: hidden; }
2101
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
2102
+ height: 55px;
2103
+ line-height: 55px;
2104
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
2105
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
2106
+ margin-right: 10px;
2107
+ cursor: pointer; }
2108
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
2109
+ padding-right: 20px;
2110
+ font-size: 17px;
2111
+ opacity: 1;
2112
+ cursor: pointer;
2113
+ color: var(--react-autoql-accent-color); }
2114
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
2115
+ background: rgba(0, 0, 0, 0.01); }
2116
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
2117
+ opacity: 0;
2118
+ margin-right: 20px;
2119
+ font-size: 16px;
2120
+ transition: all 0.2s ease;
2121
+ color: var(--react-autoql-text-color-primary);
2122
+ cursor: pointer; }
2123
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
2124
+ color: var(--react-autoql-accent-color);
2125
+ opacity: 1 !important; }
2126
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
2127
+ opacity: 0.5; }
2128
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
2129
+ display: flex;
2130
+ justify-content: space-between;
2131
+ height: 56px;
2132
+ padding-left: 25px;
2133
+ padding-right: 8px;
2134
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2135
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
2136
+ margin-bottom: 4px;
2137
+ margin-right: 8px; }
2138
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
2139
+ margin-bottom: 4px;
2140
+ margin-right: 8px;
2141
+ opacity: 0.5;
2142
+ pointer-events: none; }
2143
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
2144
+ display: flex;
2145
+ justify-content: space-between;
2146
+ align-items: center;
2147
+ padding: 5px 20px;
2148
+ padding-bottom: 0;
2149
+ color: var(--react-autoql-text-color-primary); }
2150
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
2151
+ display: inline-block;
2152
+ height: 35px;
2153
+ width: 35px;
2154
+ border-radius: 20px;
2155
+ background: var(--react-autoql-accent-color, #26a7df);
2156
+ color: white;
2157
+ line-height: 38px;
2158
+ text-align: center;
2159
+ font-size: 20px;
2160
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2161
+ transition: all 0.2s ease;
2162
+ margin-right: 5px;
2163
+ cursor: pointer; }
2164
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
2165
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
2166
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
2167
+ white-space: nowrap;
2168
+ overflow: hidden;
2169
+ text-overflow: ellipsis;
2170
+ padding-right: 10px; }
2171
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2172
+ opacity: 0.5; }
2173
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
2174
+ vertical-align: middle;
2175
+ margin-bottom: 4px;
2176
+ height: 18px; }
2177
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
2178
+ display: flex;
2179
+ align-items: center;
2180
+ margin-top: -25px; }
2292
2181
 
2293
- .react-autoql-table .tabulator-row {
2294
- /* user-select: none; This breaks copy/paste */
2295
- border-bottom: 1px solid var(--react-autoql-border-color); }
2296
-
2297
- .tabulator-cell:not(:first-child) {
2298
- border-left: 1px solid !important;
2299
- border-color: rgba(0, 0, 0, 0.06) !important; }
2300
-
2301
- .react-autoql-table .tabulator-tableHolder {
2302
- max-height: calc(100% - 38px) !important;
2303
- background-color: inherit; }
2304
-
2305
- .react-autoql-table.tabulator
2306
- .tabulator-header
2307
- .tabulator-col
2308
- .tabulator-col-content {
2309
- padding: 8px 5px; }
2310
-
2311
- .react-autoql-table.tabulator
2312
- .tabulator-header
2313
- .tabulator-col
2314
- .tabulator-col-content
2315
- .tabulator-arrow {
2316
- opacity: 0;
2317
- border-left: 4px solid transparent !important;
2318
- border-right: 4px solid transparent !important;
2319
- right: 4px;
2320
- top: calc(50% - 3px); }
2321
-
2322
- .react-autoql-table.tabulator
2323
- .tabulator-header
2324
- .tabulator-col:hover
2325
- .tabulator-col-content
2326
- .tabulator-arrow {
2327
- opacity: 1 !important; }
2328
-
2329
- .react-autoql-table.tabulator
2330
- .tabulator-header
2331
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2332
- .tabulator-col-content
2333
- .tabulator-arrow {
2334
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2335
-
2336
- .react-autoql-table.tabulator
2337
- .tabulator-header
2338
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2339
- .tabulator-col-content
2340
- .tabulator-arrow,
2341
- .react-autoql-table.tabulator
2342
- .tabulator-header
2343
- .tabulator-col.tabulator-sortable[aria-sort='none']
2344
- .tabulator-col-content
2345
- .tabulator-arrow {
2346
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2347
-
2348
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2349
- display: unset;
2350
- opacity: 0;
2351
- background-color: transparent;
2352
- width: 7px;
2353
- height: 7px;
2354
- -webkit-transition: all 0.3s ease;
2355
- transition: all 0.3s ease; }
2356
-
2357
- .react-autoql-table.tabulator .tabulator-tableHolder {
2358
- min-height: calc(100% - 40px) !important;
2359
- height: calc(100% - 40px) !important;
2360
- max-height: calc(100% - 40px) !important; }
2361
-
2362
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2363
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2364
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2365
- background-color: transparent; }
2366
-
2367
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2368
- background-color: rgba(0, 0, 0, 0.2);
2369
- border-radius: 7px;
2370
- border: 0px; }
2371
-
2372
- .react-autoql-table .tabulator-header-filter input {
2373
- border: 1px solid var(--react-autoql-border-color);
2374
- border-radius: 4px;
2375
- background: transparent;
2376
- padding: 4px 9px !important;
2377
- outline: none !important; }
2378
-
2379
- .react-autoql-table .tabulator-header-filter input:focus {
2380
- border: 1px solid #28a8e0; }
2381
-
2382
- /* These are necessary because we are always rendering the
2383
- filter (just display: none when not used) instead of re-rendering
2384
- the whole table when the filter button is clicked */
2385
- .react-autoql-table-container:not(.filtering)
2386
- .react-autoql-table
2387
- .tabulator-header-filter {
2388
- display: none; }
2389
-
2390
- .react-autoql-table-container:not(.filtering)
2391
- .react-autoql-table
2392
- .tabulator-col {
2393
- height: auto !important; }
2394
-
2395
- .tabulator-table .tabulator-row .tabulator-cell {
2396
- min-height: 38px; }
2397
-
2398
- /* Center header titles */
2399
- .react-autoql-table .tabulator-header .tabulator-col {
2400
- text-align: center !important; }
2401
-
2402
- .react-autoql-table .tabulator-header .tabulator-col-title {
2403
- padding-left: 10px !important;
2404
- padding-right: 10px !important; }
2405
-
2406
- .filter-tag {
2407
- color: #2ecc40;
2408
- border: 1px solid;
2409
- padding: 2px 4px;
2410
- border-radius: 4px;
2411
- font-weight: 400;
2412
- font-size: 10px;
2413
- margin-right: 5px;
2414
- vertical-align: top;
2415
- line-height: 21px; }
2416
-
2417
- .comparison-value-positive {
2418
- color: #2ecc40; }
2419
-
2420
- .comparison-value-negative {
2421
- color: #e80000; }
2422
-
2423
- .react-autoql-btn {
2424
- border-radius: 4px;
2425
- cursor: pointer;
2426
- outline: none !important;
2427
- transition: all 0.2s ease;
2428
- width: auto;
2429
- display: inline-block; }
2430
-
2431
- .react-autoql-btn.disabled {
2432
- opacity: 0.4;
2433
- cursor: not-allowed;
2434
- pointer-events: none; }
2435
-
2436
- .react-autoql-btn.small {
2437
- padding: 2px 8px;
2438
- margin: 2px 3px; }
2439
-
2440
- .react-autoql-btn.large {
2441
- padding: 5px 16px;
2442
- margin: 2px 5px; }
2182
+ .react-autoql-step-container a {
2183
+ color: var(--react-autoql-accent-color, #26a7df); }
2443
2184
 
2444
- .react-autoql-btn.default {
2445
- color: inherit;
2446
- border: 1px solid var(--react-autoql-border-color);
2447
- background: inherit; }
2448
- .react-autoql-btn.default:hover {
2449
- border-color: var(--react-autoql-accent-color);
2450
- color: var(--react-autoql-accent-color); }
2185
+ .frequency-date-select-container {
2186
+ margin-top: 10px; }
2451
2187
 
2452
- .react-autoql-btn.primary {
2453
- background: var(--react-autoql-accent-color);
2454
- border: 1px solid var(--react-autoql-accent-color);
2455
- color: white; }
2456
- .react-autoql-btn.primary:hover {
2457
- opacity: 0.8; }
2188
+ .notification-frequency-step {
2189
+ display: flex; }
2190
+ .notification-frequency-step .frequency-category-select {
2191
+ position: relative;
2192
+ padding-top: 9px; }
2193
+ .notification-frequency-step .notification-frequency-select {
2194
+ margin-left: 8px; }
2195
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2196
+ line-height: 33px; }
2197
+ .notification-frequency-step .frequency-repeat-follow-text {
2198
+ line-height: 32px;
2199
+ vertical-align: top; }
2200
+ .notification-frequency-step .frequency-settings-container {
2201
+ flex: 0 1 400px; }
2458
2202
 
2459
- .react-autoql-btn.danger {
2460
- color: var(--react-autoql-danger-color, #ca0b00);
2461
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2462
- background: inherit; }
2463
- .react-autoql-btn.danger:hover {
2464
- background-color: var(--react-autoql-danger-color, #ca0b00);
2465
- color: #fff; }
2203
+ .schedule-builder-timezone-section {
2204
+ margin: 10px 5px; }
2205
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
2206
+ display: inline-block;
2207
+ width: 300px; }
2466
2208
 
2467
- .react-autoql-cascader {
2209
+ .react-autoql-notifications-button-container {
2468
2210
  position: relative;
2469
- white-space: nowrap;
2470
- overflow: hidden;
2471
- min-width: 300px; }
2472
- .react-autoql-cascader .options-container {
2473
- transition: max-width 0.3s ease;
2211
+ display: inline-block;
2212
+ font-size: inherit;
2213
+ line-height: 1em;
2214
+ width: 1em; }
2215
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
2216
+ font-size: 1em;
2217
+ line-height: 0;
2218
+ vertical-align: bottom; }
2219
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
2220
+ position: absolute;
2221
+ border: 2px solid #fff;
2222
+ background: #f5222d;
2223
+ border-radius: 6.3em;
2224
+ line-height: 1.3em;
2225
+ left: 0.6em;
2226
+ top: -0.8em;
2227
+ padding: 0.15em 0.5em;
2228
+ text-align: center;
2229
+ color: white;
2230
+ font-size: 0.5em; }
2231
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
2232
+ position: absolute;
2474
2233
  display: inline-block;
2475
- vertical-align: top;
2476
- padding: 0 10px;
2477
- margin: 10px 0;
2478
- width: 100%;
2479
- max-width: calc(100% - 20px);
2480
- white-space: pre-wrap; }
2481
- .react-autoql-cascader .options-container.hidden {
2482
- max-width: 0; }
2483
- .react-autoql-cascader .options-container.hidden span {
2484
- white-space: nowrap; }
2485
- .react-autoql-cascader .options-container.hidden .option {
2486
- opacity: 0;
2487
- pointer-events: none; }
2488
- .react-autoql-cascader .options-container .options-title {
2489
- padding: 4px;
2490
- padding-left: 10px;
2491
- font-weight: 600; }
2492
- .react-autoql-cascader .options-container .cascader-back-arrow {
2493
- position: absolute;
2494
- cursor: pointer;
2495
- top: 15px;
2496
- left: 0; }
2497
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2498
- opacity: 0.8; }
2499
- .react-autoql-cascader .options-container .option {
2500
- cursor: pointer;
2501
- padding: 4px;
2502
- display: flex;
2503
- justify-content: space-between;
2504
- border-radius: 2px;
2505
- padding-left: 10px; }
2506
- .react-autoql-cascader .options-container .option .option-arrow {
2507
- opacity: 0.7; }
2508
- .react-autoql-cascader .options-container .option .option-execute-icon {
2509
- opacity: 0;
2510
- color: #fff;
2511
- font-size: 16px;
2512
- vertical-align: middle; }
2513
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2514
- background-color: var(--react-autoql-accent-color, #26a7df);
2515
- color: #fff; }
2516
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2517
- opacity: 1; }
2518
- .react-autoql-cascader .options-container:not(:last-child) {
2519
- border-right: 1px solid #d3d3d352; }
2234
+ border: 2px solid #fff;
2235
+ background: #f5222d;
2236
+ border-radius: 50%;
2237
+ height: 0.6em;
2238
+ width: 0.6em;
2239
+ left: 0.5em;
2240
+ top: -2px; }
2241
+
2242
+ .notification-rule-outer-container {
2243
+ position: relative;
2244
+ border: 1px solid transparent;
2245
+ border-radius: 4px;
2246
+ padding-bottom: 5px; }
2247
+
2248
+ .expression-error-message {
2249
+ padding-left: 5px; }
2250
+
2251
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
+ border: none; }
2520
2253
 
2521
2254
  .query-tips-page-container {
2522
2255
  height: 100%;
@@ -2805,381 +2538,648 @@ the whole table when the filter button is clicked */
2805
2538
  max-height: 50vh;
2806
2539
  overflow-y: auto; }
2807
2540
 
2808
- .autoql-condition-locking-menu-container
2809
- .react-autosuggest__suggestions-container--open {
2810
- background-color: var(--react-autoql-background-color-primary);
2811
- border: 1px solid var(--react-autoql-border-color);
2812
- color: var(--react-autoql-text-color-primary); }
2541
+ .autoql-condition-locking-menu-container
2542
+ .react-autosuggest__suggestions-container--open {
2543
+ background-color: var(--react-autoql-background-color-primary);
2544
+ border: 1px solid var(--react-autoql-border-color);
2545
+ color: var(--react-autoql-text-color-primary); }
2546
+
2547
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2548
+ color: var(--react-autoql-text-color-primary); }
2549
+
2550
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2551
+ opacity: 0.5; }
2552
+
2553
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2554
+ opacity: 0.5; }
2555
+
2556
+ .autoql-condition-locking-menu-container input::placeholder {
2557
+ opacity: 0.5; }
2558
+
2559
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2560
+ margin: 0;
2561
+ padding: 0;
2562
+ list-style-type: none; }
2563
+
2564
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2565
+ cursor: pointer;
2566
+ padding: 2px;
2567
+ padding-left: 18px;
2568
+ letter-spacing: 0.05em;
2569
+ line-height: 22.5px; }
2570
+
2571
+ .autoql-condition-locking-menu-container
2572
+ .react-autosuggest__suggestion--highlighted {
2573
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2574
+
2575
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2576
+ padding: 10px 0 0 10px;
2577
+ font-size: 12px;
2578
+ color: #777; }
2579
+
2580
+ .chat-single-message-container {
2581
+ transition: background-color 0.2s ease;
2582
+ padding-top: 6px; }
2583
+ .chat-single-message-container:first-of-type {
2584
+ margin-top: 10px; }
2585
+ .chat-single-message-container .query-more-btn {
2586
+ transition: all 0.3s ease;
2587
+ font-size: 22px;
2588
+ padding: 13px;
2589
+ margin-bottom: 6px;
2590
+ height: 42px;
2591
+ opacity: 0;
2592
+ visibility: hidden;
2593
+ cursor: pointer; }
2594
+ .chat-single-message-container .query-more-btn:hover {
2595
+ opacity: 1; }
2596
+
2597
+ .chat-condition-item-container {
2598
+ position: absolute;
2599
+ background: inherit;
2600
+ bottom: 0px;
2601
+ padding: 5px;
2602
+ border-radius: 6px; }
2603
+
2604
+ .chat-condition-item {
2605
+ background: none !important;
2606
+ border: none;
2607
+ margin-top: -20px !important;
2608
+ padding: 0 !important;
2609
+ font-family: var(--react-autoql-font-family);
2610
+ color: var(--react-autoql-accent-color);
2611
+ text-decoration: underline;
2612
+ cursor: pointer; }
2613
+
2614
+ .chat-single-message-container.response {
2615
+ display: flex;
2616
+ justify-content: flex-start;
2617
+ padding-left: 20px;
2618
+ -webkit-animation: scale-up-bl 0.6s ease;
2619
+ animation: scale-up-bl 0.6s ease; }
2620
+
2621
+ .chat-single-message-container.request {
2622
+ display: flex;
2623
+ justify-content: flex-end;
2624
+ padding-right: 20px;
2625
+ -webkit-animation: scale-up-br 0.6s ease;
2626
+ animation: scale-up-br 0.6s ease; }
2627
+
2628
+ .chat-single-message-container .chat-message-bubble {
2629
+ position: relative;
2630
+ padding: 13px;
2631
+ border-radius: 10px;
2632
+ max-width: calc(100% - 20px);
2633
+ word-wrap: break-word;
2634
+ font-family: inherit;
2635
+ font-size: 14px;
2636
+ letter-spacing: 0.04em;
2637
+ box-sizing: border-box;
2638
+ /* make small margin on bottom because sometimes react
2639
+ custom scrollbar cuts off a pixel or 2 at the bottom */
2640
+ margin-bottom: 6px; }
2641
+
2642
+ .chat-single-message-container .chat-message-bubble.text {
2643
+ max-width: 85%; }
2644
+
2645
+ .chat-single-message-container .chat-message-bubble.full-width {
2646
+ width: calc(100% - 20px) !important;
2647
+ min-width: calc(100% - 20px) !important;
2648
+ max-width: calc(100% - 20px) !important; }
2649
+
2650
+ .chat-single-message-container.response .chat-message-bubble.active {
2651
+ border: 1px solid #c3c3c3; }
2652
+
2653
+ .chat-single-message-container.response .chat-message-bubble {
2654
+ background: var(--react-autoql-background-color-primary);
2655
+ color: var(--react-autoql-text-color-primary);
2656
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2657
+
2658
+ .chat-single-message-container.response .chat-message-bubble:not(.text) {
2659
+ min-width: 125px; }
2660
+
2661
+ .chat-single-message-container.request .chat-message-bubble {
2662
+ background: var(--react-autoql-accent-color);
2663
+ color: white;
2664
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2665
+
2666
+ /* Increase height of message to include table filters,
2667
+ so we dont have to redraw the whole table */
2668
+ .chat-single-message-container.response.filtering-table {
2669
+ max-height: calc(85% + 35px) !important; }
2670
+
2671
+ .chat-message-toolbar,
2672
+ .chat-message-toolbar.autoql-options-toolbar {
2673
+ display: none;
2674
+ position: absolute;
2675
+ background: inherit;
2676
+ top: -31px;
2677
+ padding: 5px;
2678
+ border-radius: 6px;
2679
+ line-height: 28px;
2680
+ background: var(--react-autoql-background-color-primary);
2681
+ border: 1px solid var(--react-autoql-border-color);
2682
+ color: var(--react-autoql-accent-color); }
2683
+
2684
+ .chat-message-toolbar.right {
2685
+ right: -9px; }
2686
+
2687
+ .chat-message-toolbar.left {
2688
+ left: -9px; }
2689
+
2690
+ .chat-message-bubble:hover .chat-message-toolbar,
2691
+ .chat-message-bubble .chat-message-toolbar.active {
2692
+ display: block; }
2693
+
2694
+ .report-problem-text-area {
2695
+ border-radius: 4px;
2696
+ border: 1px solid rgba(0, 0, 0, 0.15);
2697
+ margin-top: 10px;
2698
+ padding: 5px 10px;
2699
+ outline: none !important; }
2700
+
2701
+ .data-limit-warning-icon {
2702
+ color: var(--react-autoql-warning-color) !important;
2703
+ position: absolute !important;
2704
+ bottom: 2px;
2705
+ right: 4px;
2706
+ font-size: 20px; }
2707
+
2708
+ .condition-info-icon-left-align {
2709
+ color: var(--react-autoql-accent-color) !important;
2710
+ position: absolute !important;
2711
+ bottom: 2px;
2712
+ right: 10px;
2713
+ font-size: 20px; }
2714
+
2715
+ .condition-info-icon {
2716
+ color: var(--react-autoql-accent-color) !important;
2717
+ position: absolute !important;
2718
+ bottom: 2px;
2719
+ right: 4px;
2720
+ font-size: 20px; }
2721
+
2722
+ .more-options-menu,
2723
+ .report-problem-menu {
2724
+ background: var(--react-autoql-background-color-primary);
2725
+ padding: 10px 0; }
2726
+ .more-options-menu span.react-autoql-icon svg,
2727
+ .report-problem-menu span.react-autoql-icon svg {
2728
+ margin-right: 3px; }
2729
+
2730
+ .interpretation-icon {
2731
+ vertical-align: top;
2732
+ height: 26px;
2733
+ margin: 0 3px;
2734
+ font-size: 18px; }
2735
+
2736
+ /* Chart icon styles */
2737
+ .chart-icon-svg-0,
2738
+ .react-autoql-icon-svg-0 {
2739
+ fill: currentColor; }
2740
+
2741
+ .hm0 {
2742
+ opacity: 0.5;
2743
+ fill: currentColor;
2744
+ enable-background: new; }
2745
+
2746
+ .hm1 {
2747
+ fill: currentColor; }
2748
+
2749
+ .hm2 {
2750
+ opacity: 0.15;
2751
+ fill: currentColor;
2752
+ enable-background: new; }
2753
+
2754
+ .hm3 {
2755
+ opacity: 0.6;
2756
+ fill: currentColor;
2757
+ enable-background: new; }
2758
+
2759
+ .hm4 {
2760
+ opacity: 0.65;
2761
+ fill: currentColor;
2762
+ enable-background: new; }
2763
+
2764
+ .hm5 {
2765
+ fill: currentColor; }
2766
+
2767
+ .hm6 {
2768
+ fill: currentColor; }
2769
+
2770
+ /* animations */
2771
+ @-webkit-keyframes scale-up-br {
2772
+ 0% {
2773
+ transform: scale(0.5);
2774
+ transform-origin: 100% 100%; }
2775
+ 100% {
2776
+ transform: scale(1);
2777
+ transform-origin: 100% 100%; } }
2778
+ @keyframes scale-up-br {
2779
+ 0% {
2780
+ transform: scale(0.5);
2781
+ transform-origin: 100% 100%; }
2782
+ 100% {
2783
+ transform: scale(1);
2784
+ transform-origin: 100% 100%; } }
2785
+
2786
+ @-webkit-keyframes scale-up-bl {
2787
+ 0% {
2788
+ transform: scale(0.5);
2789
+ transform-origin: 0% 100%; }
2790
+ 100% {
2791
+ transform: scale(1);
2792
+ transform-origin: 0% 100%; } }
2813
2793
 
2814
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2815
- color: var(--react-autoql-text-color-primary); }
2794
+ @keyframes scale-up-bl {
2795
+ 0% {
2796
+ transform: scale(0.5);
2797
+ transform-origin: 0% 100%; }
2798
+ 100% {
2799
+ transform: scale(1);
2800
+ transform-origin: 0% 100%; } }
2816
2801
 
2817
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2818
- opacity: 0.5; }
2802
+ .ReactModal__Overlay {
2803
+ background-color: transparent !important;
2804
+ transition: background-color 0.2s ease-in-out;
2805
+ z-index: 9999; }
2819
2806
 
2820
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2821
- opacity: 0.5; }
2807
+ .ReactModal__Overlay--after-open {
2808
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2822
2809
 
2823
- .autoql-condition-locking-menu-container input::placeholder {
2824
- opacity: 0.5; }
2810
+ .ReactModal__Overlay--before-close {
2811
+ background-color: transparent !important; }
2825
2812
 
2826
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2827
- margin: 0;
2828
- padding: 0;
2829
- list-style-type: none; }
2813
+ .ReactModal__Content {
2814
+ display: flex;
2815
+ flex-direction: column;
2816
+ transform: scale(0);
2817
+ transition: all 0.2s ease-in-out;
2818
+ color: var(--react-autoql-text-color-primary);
2819
+ border: 1px solid var(--react-autoql-border-color) !important;
2820
+ background: var(--react-autoql-background-color-primary) !important;
2821
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2822
+ padding: 0 !important;
2823
+ margin: auto auto;
2824
+ max-width: 90vw;
2825
+ max-height: calc(100vh - 90px); }
2826
+ .ReactModal__Content input.react-autoql-input,
2827
+ .ReactModal__Content textarea.react-autoql-input,
2828
+ .ReactModal__Content textarea {
2829
+ border-color: var(--react-autoql-border-color);
2830
+ color: var(--react-autoql-text-color-primary);
2831
+ background: var(--react-autoql-background-color-primary, white); }
2832
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2833
+ color: var(--react-autoql-text-color-placeholder); }
2834
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2835
+ color: var(--react-autoql-text-color-placeholder); }
2836
+ .ReactModal__Content input.react-autoql-input::placeholder,
2837
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2838
+ .ReactModal__Content textarea::placeholder {
2839
+ color: var(--react-autoql-text-color-placeholder); }
2830
2840
 
2831
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2832
- cursor: pointer;
2833
- padding: 2px;
2834
- padding-left: 18px;
2835
- letter-spacing: 0.05em;
2836
- line-height: 22.5px; }
2841
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2842
+ transform: scale(1); }
2837
2843
 
2838
- .autoql-condition-locking-menu-container
2839
- .react-autosuggest__suggestion--highlighted {
2840
- background-color: rgba(0, 0, 0, 0.1) !important; }
2844
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2845
+ transform: scale(0); }
2841
2846
 
2842
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2843
- padding: 10px 0 0 10px;
2844
- font-size: 12px;
2845
- color: #777; }
2847
+ .react-autoql-modal-header {
2848
+ position: relative;
2849
+ text-align: center;
2850
+ flex: 0 0 52px;
2851
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2852
+ padding: 14px 60px;
2853
+ font-size: 16px; }
2846
2854
 
2847
- .chat-single-message-container {
2848
- transition: background-color 0.2s ease;
2849
- padding-top: 6px; }
2850
- .chat-single-message-container:first-of-type {
2851
- margin-top: 10px; }
2852
- .chat-single-message-container .query-more-btn {
2853
- transition: all 0.3s ease;
2854
- font-size: 22px;
2855
- padding: 13px;
2856
- margin-bottom: 6px;
2857
- height: 42px;
2858
- opacity: 0;
2859
- visibility: hidden;
2860
- cursor: pointer; }
2861
- .chat-single-message-container .query-more-btn:hover {
2862
- opacity: 1; }
2855
+ .react-autoql-modal-footer {
2856
+ position: relative;
2857
+ flex: 0 0 52px;
2858
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2859
+ text-align: right;
2860
+ padding: 8px 10px; }
2863
2861
 
2864
- .chat-condition-item-container {
2865
- position: absolute;
2866
- background: inherit;
2867
- bottom: 0px;
2868
- padding: 5px;
2869
- border-radius: 6px; }
2862
+ .react-autoql-modal-body {
2863
+ display: flex;
2864
+ flex-direction: column;
2865
+ padding: 25px;
2866
+ flex: 1;
2867
+ overflow: hidden; }
2868
+ .react-autoql-modal-body h3 {
2869
+ color: var(--react-autoql-text-color-primary); }
2870
2870
 
2871
- .chat-condition-item {
2872
- background: none !important;
2873
- border: none;
2874
- margin-top: -20px !important;
2875
- padding: 0 !important;
2876
- font-family: var(--react-autoql-font-family);
2877
- color: var(--react-autoql-accent-color);
2878
- text-decoration: underline;
2871
+ .react-autoql-modal-close-btn {
2872
+ position: absolute !important;
2873
+ top: 10px;
2874
+ right: 18px;
2875
+ font-size: 22px;
2876
+ opacity: 0.6 !important;
2879
2877
  cursor: pointer; }
2880
2878
 
2881
- .chat-single-message-container.response {
2882
- display: flex;
2883
- justify-content: flex-start;
2884
- padding-left: 20px;
2885
- -webkit-animation: scale-up-bl 0.6s ease;
2886
- animation: scale-up-bl 0.6s ease; }
2887
-
2888
- .chat-single-message-container.request {
2889
- display: flex;
2890
- justify-content: flex-end;
2891
- padding-right: 20px;
2892
- -webkit-animation: scale-up-br 0.6s ease;
2893
- animation: scale-up-br 0.6s ease; }
2879
+ .react-autoql-modal-close-btn:hover {
2880
+ opacity: 1 !important; }
2894
2881
 
2895
- .chat-single-message-container .chat-message-bubble {
2882
+ .react-autoql-cascader {
2896
2883
  position: relative;
2897
- padding: 13px;
2898
- border-radius: 10px;
2899
- max-width: calc(100% - 20px);
2900
- word-wrap: break-word;
2901
- font-family: inherit;
2902
- font-size: 14px;
2903
- letter-spacing: 0.04em;
2904
- box-sizing: border-box;
2905
- /* make small margin on bottom because sometimes react
2906
- custom scrollbar cuts off a pixel or 2 at the bottom */
2907
- margin-bottom: 6px; }
2884
+ white-space: nowrap;
2885
+ overflow: hidden;
2886
+ min-width: 300px; }
2887
+ .react-autoql-cascader .options-container {
2888
+ transition: max-width 0.3s ease;
2889
+ display: inline-block;
2890
+ vertical-align: top;
2891
+ padding: 0 10px;
2892
+ margin: 10px 0;
2893
+ width: 100%;
2894
+ max-width: calc(100% - 20px);
2895
+ white-space: pre-wrap; }
2896
+ .react-autoql-cascader .options-container.hidden {
2897
+ max-width: 0; }
2898
+ .react-autoql-cascader .options-container.hidden span {
2899
+ white-space: nowrap; }
2900
+ .react-autoql-cascader .options-container.hidden .option {
2901
+ opacity: 0;
2902
+ pointer-events: none; }
2903
+ .react-autoql-cascader .options-container .options-title {
2904
+ padding: 4px;
2905
+ padding-left: 10px;
2906
+ font-weight: 600; }
2907
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2908
+ position: absolute;
2909
+ cursor: pointer;
2910
+ top: 15px;
2911
+ left: 0; }
2912
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2913
+ opacity: 0.8; }
2914
+ .react-autoql-cascader .options-container .option {
2915
+ cursor: pointer;
2916
+ padding: 4px;
2917
+ display: flex;
2918
+ justify-content: space-between;
2919
+ border-radius: 2px;
2920
+ padding-left: 10px; }
2921
+ .react-autoql-cascader .options-container .option .option-arrow {
2922
+ opacity: 0.7; }
2923
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2924
+ opacity: 0;
2925
+ color: #fff;
2926
+ font-size: 16px;
2927
+ vertical-align: middle; }
2928
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2929
+ background-color: var(--react-autoql-accent-color, #26a7df);
2930
+ color: #fff; }
2931
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2932
+ opacity: 1; }
2933
+ .react-autoql-cascader .options-container:not(:last-child) {
2934
+ border-right: 1px solid #d3d3d352; }
2908
2935
 
2909
- .chat-single-message-container .chat-message-bubble.text {
2910
- max-width: 85%; }
2936
+ .react-autoql-btn {
2937
+ border-radius: 4px;
2938
+ cursor: pointer;
2939
+ outline: none !important;
2940
+ transition: all 0.2s ease;
2941
+ width: auto;
2942
+ display: inline-block; }
2911
2943
 
2912
- .chat-single-message-container .chat-message-bubble.full-width {
2913
- width: calc(100% - 20px) !important;
2914
- min-width: calc(100% - 20px) !important;
2915
- max-width: calc(100% - 20px) !important; }
2944
+ .react-autoql-btn.disabled {
2945
+ opacity: 0.4;
2946
+ cursor: not-allowed;
2947
+ pointer-events: none; }
2916
2948
 
2917
- .chat-single-message-container.response .chat-message-bubble.active {
2918
- border: 1px solid #c3c3c3; }
2949
+ .react-autoql-btn.small {
2950
+ padding: 2px 8px;
2951
+ margin: 2px 3px; }
2919
2952
 
2920
- .chat-single-message-container.response .chat-message-bubble {
2921
- background: var(--react-autoql-background-color-primary);
2922
- color: var(--react-autoql-text-color-primary);
2923
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2953
+ .react-autoql-btn.large {
2954
+ padding: 5px 16px;
2955
+ margin: 2px 5px; }
2924
2956
 
2925
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2926
- min-width: 125px; }
2957
+ .react-autoql-btn.default {
2958
+ color: inherit;
2959
+ border: 1px solid var(--react-autoql-border-color);
2960
+ background: inherit; }
2961
+ .react-autoql-btn.default:hover {
2962
+ border-color: var(--react-autoql-accent-color);
2963
+ color: var(--react-autoql-accent-color); }
2927
2964
 
2928
- .chat-single-message-container.request .chat-message-bubble {
2965
+ .react-autoql-btn.primary {
2929
2966
  background: var(--react-autoql-accent-color);
2930
- color: white;
2931
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2967
+ border: 1px solid var(--react-autoql-accent-color);
2968
+ color: white; }
2969
+ .react-autoql-btn.primary:hover {
2970
+ opacity: 0.8; }
2932
2971
 
2933
- /* Increase height of message to include table filters,
2934
- so we dont have to redraw the whole table */
2935
- .chat-single-message-container.response.filtering-table {
2936
- max-height: calc(85% + 35px) !important; }
2972
+ .react-autoql-btn.danger {
2973
+ color: var(--react-autoql-danger-color, #ca0b00);
2974
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2975
+ background: inherit; }
2976
+ .react-autoql-btn.danger:hover {
2977
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2978
+ color: #fff; }
2937
2979
 
2938
- .chat-message-toolbar,
2939
- .chat-message-toolbar.autoql-options-toolbar {
2940
- display: none;
2980
+ .autoql-options-toolbar {
2941
2981
  position: absolute;
2942
2982
  background: inherit;
2943
- top: -31px;
2944
2983
  padding: 5px;
2945
2984
  border-radius: 6px;
2946
2985
  line-height: 28px;
2947
2986
  background: var(--react-autoql-background-color-primary);
2948
- border: 1px solid var(--react-autoql-border-color);
2949
- color: var(--react-autoql-accent-color); }
2950
-
2951
- .chat-message-toolbar.right {
2952
- right: -9px; }
2953
-
2954
- .chat-message-toolbar.left {
2955
- left: -9px; }
2987
+ border: 1px solid var(--react-autoql-border-color); }
2988
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2989
+ display: block; }
2990
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2991
+ color: var(--react-autoql-accent-color); }
2956
2992
 
2957
- .chat-message-bubble:hover .chat-message-toolbar,
2958
- .chat-message-bubble .chat-message-toolbar.active {
2959
- display: block; }
2993
+ .copy-sql-modal-content {
2994
+ position: relative;
2995
+ height: 60vh; }
2996
+ .copy-sql-modal-content .copy-sql-formatted-text {
2997
+ height: 100%;
2998
+ width: 100%;
2999
+ padding: 10px;
3000
+ resize: none;
3001
+ background: var(--react-autoql-background-color-secondary); }
3002
+ .copy-sql-modal-content .copy-sql-btn {
3003
+ color: var(--react-autoql-text-color);
3004
+ background-color: var(--react-autoql-background-color-primary);
3005
+ position: absolute;
3006
+ top: 3px;
3007
+ right: 0;
3008
+ opacity: 0;
3009
+ transition: opacity 0.3s ease; }
3010
+ .copy-sql-modal-content .sql-copied {
3011
+ color: var(--react-autoql-success-color) !important; }
3012
+ .copy-sql-modal-content:hover .copy-sql-btn {
3013
+ opacity: 1; }
2960
3014
 
2961
- .report-problem-text-area {
2962
- border-radius: 4px;
2963
- border: 1px solid rgba(0, 0, 0, 0.15);
2964
- margin-top: 10px;
2965
- padding: 5px 10px;
2966
- outline: none !important; }
3015
+ .react-autoql-table-container {
3016
+ height: 100%;
3017
+ max-width: 100%;
3018
+ background-color: inherit; }
2967
3019
 
2968
- .data-limit-warning-icon {
2969
- color: var(--react-autoql-warning-color) !important;
2970
- position: absolute !important;
2971
- bottom: 2px;
2972
- right: 4px;
2973
- font-size: 20px; }
3020
+ .react-autoql-table {
3021
+ margin-bottom: 0; }
2974
3022
 
2975
- .condition-info-icon-left-align {
2976
- color: var(--react-autoql-accent-color) !important;
2977
- position: absolute !important;
2978
- bottom: 2px;
2979
- right: 10px;
2980
- font-size: 20px; }
3023
+ /* tabulator */
3024
+ .react-autoql-table.tabulator,
3025
+ .react-autoql-table.tabulator .tabulator-row,
3026
+ .react-autoql-table.tabulator .tabulator-header,
3027
+ .react-autoql-table.tabulator .tabulator-headers,
3028
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3029
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
3030
+ background-color: inherit; }
2981
3031
 
2982
- .condition-info-icon {
2983
- color: var(--react-autoql-accent-color) !important;
2984
- position: absolute !important;
2985
- bottom: 2px;
2986
- right: 4px;
2987
- font-size: 20px; }
3032
+ .react-autoql-table-container.supports-drilldown
3033
+ .react-autoql-table.tabulator
3034
+ .tabulator-row.tabulator-unselectable:hover {
3035
+ cursor: pointer !important;
3036
+ background-color: var(--react-autoql-hover-color) !important; }
2988
3037
 
2989
- .more-options-menu,
2990
- .report-problem-menu {
2991
- background: var(--react-autoql-background-color-primary);
2992
- padding: 10px 0; }
2993
- .more-options-menu span.react-autoql-icon svg,
2994
- .report-problem-menu span.react-autoql-icon svg {
2995
- margin-right: 3px; }
3038
+ .react-autoql-table.tabulator
3039
+ .tabulator-header
3040
+ .tabulator-col.tabulator-sortable:hover {
3041
+ background-color: var(--react-autoql-hover-color) !important; }
2996
3042
 
2997
- .interpretation-icon {
2998
- vertical-align: top;
2999
- height: 26px;
3000
- margin: 0 3px;
3001
- font-size: 18px; }
3043
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3044
+ .react-autoql-table.tabulator .tabulator-cell {
3045
+ border-color: var(--react-autoql-border-color); }
3002
3046
 
3003
- /* Chart icon styles */
3004
- .chart-icon-svg-0,
3005
- .react-autoql-icon-svg-0 {
3006
- fill: currentColor; }
3047
+ .react-autoql-table.tabulator .tabulator-header {
3048
+ border-bottom: 2px solid var(--react-autoql-border-color); }
3007
3049
 
3008
- .hm0 {
3009
- opacity: 0.5;
3010
- fill: currentColor;
3011
- enable-background: new; }
3050
+ .react-autoql-table.tabulator {
3051
+ background-color: inherit;
3052
+ height: 100%; }
3012
3053
 
3013
- .hm1 {
3014
- fill: currentColor; }
3054
+ .react-autoql-table .tabulator-row {
3055
+ /* user-select: none; This breaks copy/paste */
3056
+ border-bottom: 1px solid var(--react-autoql-border-color); }
3015
3057
 
3016
- .hm2 {
3017
- opacity: 0.15;
3018
- fill: currentColor;
3019
- enable-background: new; }
3058
+ .tabulator-cell:not(:first-child) {
3059
+ border-left: 1px solid !important;
3060
+ border-color: rgba(0, 0, 0, 0.06) !important; }
3020
3061
 
3021
- .hm3 {
3022
- opacity: 0.6;
3023
- fill: currentColor;
3024
- enable-background: new; }
3062
+ .react-autoql-table .tabulator-tableHolder {
3063
+ max-height: calc(100% - 38px) !important;
3064
+ background-color: inherit; }
3025
3065
 
3026
- .hm4 {
3027
- opacity: 0.65;
3028
- fill: currentColor;
3029
- enable-background: new; }
3066
+ .react-autoql-table.tabulator
3067
+ .tabulator-header
3068
+ .tabulator-col
3069
+ .tabulator-col-content {
3070
+ padding: 8px 5px; }
3030
3071
 
3031
- .hm5 {
3032
- fill: currentColor; }
3072
+ .react-autoql-table.tabulator
3073
+ .tabulator-header
3074
+ .tabulator-col
3075
+ .tabulator-col-content
3076
+ .tabulator-arrow {
3077
+ opacity: 0;
3078
+ border-left: 4px solid transparent !important;
3079
+ border-right: 4px solid transparent !important;
3080
+ right: 4px;
3081
+ top: calc(50% - 3px); }
3033
3082
 
3034
- .hm6 {
3035
- fill: currentColor; }
3083
+ .react-autoql-table.tabulator
3084
+ .tabulator-header
3085
+ .tabulator-col:hover
3086
+ .tabulator-col-content
3087
+ .tabulator-arrow {
3088
+ opacity: 1 !important; }
3036
3089
 
3037
- /* animations */
3038
- @-webkit-keyframes scale-up-br {
3039
- 0% {
3040
- transform: scale(0.5);
3041
- transform-origin: 100% 100%; }
3042
- 100% {
3043
- transform: scale(1);
3044
- transform-origin: 100% 100%; } }
3045
- @keyframes scale-up-br {
3046
- 0% {
3047
- transform: scale(0.5);
3048
- transform-origin: 100% 100%; }
3049
- 100% {
3050
- transform: scale(1);
3051
- transform-origin: 100% 100%; } }
3090
+ .react-autoql-table.tabulator
3091
+ .tabulator-header
3092
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
3093
+ .tabulator-col-content
3094
+ .tabulator-arrow {
3095
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
3052
3096
 
3053
- @-webkit-keyframes scale-up-bl {
3054
- 0% {
3055
- transform: scale(0.5);
3056
- transform-origin: 0% 100%; }
3057
- 100% {
3058
- transform: scale(1);
3059
- transform-origin: 0% 100%; } }
3097
+ .react-autoql-table.tabulator
3098
+ .tabulator-header
3099
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
3100
+ .tabulator-col-content
3101
+ .tabulator-arrow,
3102
+ .react-autoql-table.tabulator
3103
+ .tabulator-header
3104
+ .tabulator-col.tabulator-sortable[aria-sort='none']
3105
+ .tabulator-col-content
3106
+ .tabulator-arrow {
3107
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
3060
3108
 
3061
- @keyframes scale-up-bl {
3062
- 0% {
3063
- transform: scale(0.5);
3064
- transform-origin: 0% 100%; }
3065
- 100% {
3066
- transform: scale(1);
3067
- transform-origin: 0% 100%; } }
3109
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
3110
+ display: unset;
3111
+ opacity: 0;
3112
+ background-color: transparent;
3113
+ width: 7px;
3114
+ height: 7px;
3115
+ -webkit-transition: all 0.3s ease;
3116
+ transition: all 0.3s ease; }
3068
3117
 
3069
- .autoql-options-toolbar {
3070
- position: absolute;
3071
- background: inherit;
3072
- padding: 5px;
3073
- border-radius: 6px;
3074
- line-height: 28px;
3075
- background: var(--react-autoql-background-color-primary);
3076
- border: 1px solid var(--react-autoql-border-color); }
3077
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3078
- display: block; }
3079
- .autoql-options-toolbar .react-autoql-toolbar-btn {
3080
- color: var(--react-autoql-accent-color); }
3118
+ .react-autoql-table.tabulator .tabulator-tableHolder {
3119
+ min-height: calc(100% - 40px) !important;
3120
+ height: calc(100% - 40px) !important;
3121
+ max-height: calc(100% - 40px) !important; }
3081
3122
 
3082
- .copy-sql-modal-content {
3083
- position: relative;
3084
- height: 60vh; }
3085
- .copy-sql-modal-content .copy-sql-formatted-text {
3086
- height: 100%;
3087
- width: 100%;
3088
- padding: 10px;
3089
- resize: none;
3090
- background: var(--react-autoql-background-color-secondary); }
3091
- .copy-sql-modal-content .copy-sql-btn {
3092
- color: var(--react-autoql-text-color);
3093
- background-color: var(--react-autoql-background-color-primary);
3094
- position: absolute;
3095
- top: 3px;
3096
- right: 0;
3097
- opacity: 0;
3098
- transition: opacity 0.3s ease; }
3099
- .copy-sql-modal-content .sql-copied {
3100
- color: var(--react-autoql-success-color) !important; }
3101
- .copy-sql-modal-content:hover .copy-sql-btn {
3102
- opacity: 1; }
3123
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3124
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3125
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3126
+ background-color: transparent; }
3103
3127
 
3104
- .ReactModal__Overlay {
3105
- background-color: transparent !important;
3106
- transition: background-color 0.2s ease-in-out;
3107
- z-index: 9999; }
3128
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3129
+ background-color: rgba(0, 0, 0, 0.2);
3130
+ border-radius: 7px;
3131
+ border: 0px; }
3108
3132
 
3109
- .ReactModal__Overlay--after-open {
3110
- background-color: rgba(0, 0, 0, 0.25) !important; }
3133
+ .react-autoql-table .tabulator-header-filter input {
3134
+ border: 1px solid var(--react-autoql-border-color);
3135
+ border-radius: 4px;
3136
+ background: transparent;
3137
+ padding: 4px 9px !important;
3138
+ outline: none !important; }
3111
3139
 
3112
- .ReactModal__Overlay--before-close {
3113
- background-color: transparent !important; }
3140
+ .react-autoql-table .tabulator-header-filter input:focus {
3141
+ border: 1px solid #28a8e0; }
3114
3142
 
3115
- .ReactModal__Content {
3116
- display: flex;
3117
- flex-direction: column;
3118
- transform: scale(0);
3119
- transition: all 0.2s ease-in-out;
3120
- color: var(--react-autoql-text-color-primary);
3121
- border: 1px solid var(--react-autoql-border-color) !important;
3122
- background: var(--react-autoql-background-color-primary) !important;
3123
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3124
- padding: 0 !important;
3125
- margin: auto auto;
3126
- max-width: 90vw;
3127
- max-height: calc(100vh - 90px); }
3128
- .ReactModal__Content input.react-autoql-input,
3129
- .ReactModal__Content textarea.react-autoql-input,
3130
- .ReactModal__Content textarea {
3131
- border-color: var(--react-autoql-border-color);
3132
- color: var(--react-autoql-text-color-primary);
3133
- background: var(--react-autoql-background-color-primary, white); }
3134
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3135
- color: var(--react-autoql-text-color-placeholder); }
3136
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3137
- color: var(--react-autoql-text-color-placeholder); }
3138
- .ReactModal__Content input.react-autoql-input::placeholder,
3139
- .ReactModal__Content textarea.react-autoql-input::placeholder,
3140
- .ReactModal__Content textarea::placeholder {
3141
- color: var(--react-autoql-text-color-placeholder); }
3143
+ /* These are necessary because we are always rendering the
3144
+ filter (just display: none when not used) instead of re-rendering
3145
+ the whole table when the filter button is clicked */
3146
+ .react-autoql-table-container:not(.filtering)
3147
+ .react-autoql-table
3148
+ .tabulator-header-filter {
3149
+ display: none; }
3142
3150
 
3143
- .ReactModal__Overlay--after-open .ReactModal__Content {
3144
- transform: scale(1); }
3151
+ .react-autoql-table-container:not(.filtering)
3152
+ .react-autoql-table
3153
+ .tabulator-col {
3154
+ height: auto !important; }
3145
3155
 
3146
- .ReactModal__Overlay--before-close .ReactModal__Content {
3147
- transform: scale(0); }
3156
+ .tabulator-table .tabulator-row .tabulator-cell {
3157
+ min-height: 38px; }
3148
3158
 
3149
- .react-autoql-modal-header {
3150
- position: relative;
3151
- text-align: center;
3152
- flex: 0 0 52px;
3153
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3154
- padding: 14px 60px;
3155
- font-size: 16px; }
3159
+ /* Center header titles */
3160
+ .react-autoql-table .tabulator-header .tabulator-col {
3161
+ text-align: center !important; }
3156
3162
 
3157
- .react-autoql-modal-footer {
3158
- position: relative;
3159
- flex: 0 0 52px;
3160
- border-top: 1px solid rgba(0, 0, 0, 0.05);
3161
- text-align: right;
3162
- padding: 8px 10px; }
3163
+ .react-autoql-table .tabulator-header .tabulator-col-title {
3164
+ padding-left: 10px !important;
3165
+ padding-right: 10px !important; }
3163
3166
 
3164
- .react-autoql-modal-body {
3165
- display: flex;
3166
- flex-direction: column;
3167
- padding: 25px;
3168
- flex: 1;
3169
- overflow: hidden; }
3170
- .react-autoql-modal-body h3 {
3171
- color: var(--react-autoql-text-color-primary); }
3167
+ .filter-tag {
3168
+ color: #2ecc40;
3169
+ border: 1px solid;
3170
+ padding: 2px 4px;
3171
+ border-radius: 4px;
3172
+ font-weight: 400;
3173
+ font-size: 10px;
3174
+ margin-right: 5px;
3175
+ vertical-align: top;
3176
+ line-height: 21px; }
3172
3177
 
3173
- .react-autoql-modal-close-btn {
3174
- position: absolute !important;
3175
- top: 10px;
3176
- right: 18px;
3177
- font-size: 22px;
3178
- opacity: 0.6 !important;
3179
- cursor: pointer; }
3178
+ .comparison-value-positive {
3179
+ color: #2ecc40; }
3180
3180
 
3181
- .react-autoql-modal-close-btn:hover {
3182
- opacity: 1 !important; }
3181
+ .comparison-value-negative {
3182
+ color: #e80000; }
3183
3183
 
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
@@ -3229,125 +3229,56 @@ so we dont have to redraw the whole table */
3229
3229
  .react-autoql-chart-container .react-autoql-bubble-chart g.tick line {
3230
3230
  opacity: 0 !important; }
3231
3231
 
3232
- .axis-selector-container {
3233
- background: var(--react-autoql-background-color-primary);
3234
- color: var(--react-autoql-text-color-primary);
3235
- z-index: 9999;
3236
- padding: 5px 0;
3237
- max-height: 300px;
3238
- min-width: 150px;
3239
- overflow-y: auto; }
3240
- .axis-selector-container .axis-select-option.active {
3241
- background: var(--react-autoql-hover-color); }
3242
- .axis-selector-container .react-autoql-checkbox {
3243
- margin-left: 20px; }
3244
- .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3245
- width: 18px;
3246
- height: 18px; }
3247
- .axis-selector-container .react-autoql-list-item {
3248
- padding-left: 25px;
3249
- padding-right: 15px;
3250
- font-size: 12px;
3251
- line-height: 28px; }
3252
- .axis-selector-container .string-select-list-item {
3253
- font-size: 12px;
3254
- line-height: 28px; }
3255
- .axis-selector-container .string-select-list-item.active {
3256
- background: rgba(0, 0, 0, 0.04); }
3257
- .axis-selector-container .number-selector-header {
3258
- margin-top: 10px;
3259
- padding: 0px 18px;
3260
- font-size: 12px;
3261
- padding-bottom: 7px;
3262
- font-weight: 500;
3263
- opacity: 0.6; }
3264
- .axis-selector-container .axis-selector-content {
3265
- list-style-type: none;
3266
- width: 100%;
3267
- margin: 0;
3268
- padding: 0; }
3269
- .axis-selector-container .axis-selector-content li {
3270
- color: var(--react-autoql-text-color-primary);
3271
- width: 100%;
3272
- height: 30px;
3273
- line-height: 30px;
3274
- padding: 0 15px;
3275
- cursor: pointer; }
3276
- .axis-selector-container .axis-selector-content li:hover {
3277
- background: rgba(0, 0, 0, 0.05); }
3278
-
3279
- .axis-selector-apply-btn {
3280
- background: var(--react-autoql-background-color-primary);
3281
- padding: 5px; }
3282
-
3283
- .react-autoql-steps-container {
3284
- margin: 10px; }
3285
-
3286
- .react-autoql-step-container {
3287
- position: relative;
3288
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3289
- margin-left: 12px;
3290
- padding-left: 20px;
3291
- padding-bottom: 5px;
3292
- transition: all 0.5s ease; }
3293
- .react-autoql-step-container.complete {
3294
- border-color: var(--react-autoql-accent-color, #26a7df); }
3295
- .react-autoql-step-container.complete .react-autoql-step-dot {
3296
- border-color: var(--react-autoql-accent-color, #26a7df);
3297
- background: var(--react-autoql-accent-color, #26a7df);
3298
- color: #fff; }
3299
- .react-autoql-step-container.error {
3300
- border-color: var(--react-autoql-warning-color); }
3301
- .react-autoql-step-container.error .react-autoql-step-dot {
3302
- border-color: var(--react-autoql-warning-color);
3303
- background: var(--react-autoql-warning-color);
3304
- color: white; }
3305
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3306
- pointer-events: none;
3307
- height: 10px;
3308
- opacity: 0;
3309
- margin: 0; }
3310
-
3311
- .react-autoql-step-dot {
3312
- position: absolute;
3313
- top: 0;
3314
- left: -10px;
3315
- height: 20px;
3316
- width: 20px;
3317
- border-radius: 15px;
3318
- background: var(--react-autoql-background-color-primary, #fff);
3319
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3320
- transition: all 0.5s ease;
3321
- font-size: 10.5px;
3322
- color: var(--react-autoql-text-color-placeholder, lightgray);
3323
- text-align: center; }
3324
-
3325
- .react-autoql-step-title-container:hover {
3326
- cursor: pointer;
3327
- transition: color 0.2s ease;
3328
- color: var(--react-autoql-accent-color, #26a7df); }
3329
-
3330
- .react-autoql-step-title {
3331
- font-weight: 500;
3332
- font-size: 15px;
3333
- line-height: 15px;
3334
- padding-top: 2px; }
3335
-
3336
- .react-autoql-step-subtitle {
3337
- font-size: 13px;
3338
- padding-top: 6px;
3339
- padding-bottom: 6px;
3340
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3341
-
3342
- .react-autoql-step-content {
3343
- margin: 15px;
3344
- margin-top: 0; }
3345
-
3346
- .react-autoql-step-content-container {
3347
- transition-timing-function: ease;
3348
- transition-property: height, opacity, margin;
3349
- transition-duration: 0.5s;
3350
- opacity: 1; }
3232
+ .axis-selector-container {
3233
+ background: var(--react-autoql-background-color-primary);
3234
+ color: var(--react-autoql-text-color-primary);
3235
+ z-index: 9999;
3236
+ padding: 5px 0;
3237
+ max-height: 300px;
3238
+ min-width: 150px;
3239
+ overflow-y: auto; }
3240
+ .axis-selector-container .axis-select-option.active {
3241
+ background: var(--react-autoql-hover-color); }
3242
+ .axis-selector-container .react-autoql-checkbox {
3243
+ margin-left: 20px; }
3244
+ .axis-selector-container .react-autoql-checkbox .react-autoql-checkbox__input {
3245
+ width: 18px;
3246
+ height: 18px; }
3247
+ .axis-selector-container .react-autoql-list-item {
3248
+ padding-left: 25px;
3249
+ padding-right: 15px;
3250
+ font-size: 12px;
3251
+ line-height: 28px; }
3252
+ .axis-selector-container .string-select-list-item {
3253
+ font-size: 12px;
3254
+ line-height: 28px; }
3255
+ .axis-selector-container .string-select-list-item.active {
3256
+ background: rgba(0, 0, 0, 0.04); }
3257
+ .axis-selector-container .number-selector-header {
3258
+ margin-top: 10px;
3259
+ padding: 0px 18px;
3260
+ font-size: 12px;
3261
+ padding-bottom: 7px;
3262
+ font-weight: 500;
3263
+ opacity: 0.6; }
3264
+ .axis-selector-container .axis-selector-content {
3265
+ list-style-type: none;
3266
+ width: 100%;
3267
+ margin: 0;
3268
+ padding: 0; }
3269
+ .axis-selector-container .axis-selector-content li {
3270
+ color: var(--react-autoql-text-color-primary);
3271
+ width: 100%;
3272
+ height: 30px;
3273
+ line-height: 30px;
3274
+ padding: 0 15px;
3275
+ cursor: pointer; }
3276
+ .axis-selector-container .axis-selector-content li:hover {
3277
+ background: rgba(0, 0, 0, 0.05); }
3278
+
3279
+ .axis-selector-apply-btn {
3280
+ background: var(--react-autoql-background-color-primary);
3281
+ padding: 5px; }
3351
3282
 
3352
3283
 
3353
3284
  .react-autoql-input-container {
@@ -3401,6 +3332,77 @@ so we dont have to redraw the whole table */
3401
3332
  opacity: 1;
3402
3333
  color: var(--react-autoql-accent-color, #26a7df); }
3403
3334
 
3335
+ .react-autoql-radio-btn-container {
3336
+ display: inline-block;
3337
+ border-radius: 4px; }
3338
+ .react-autoql-radio-btn-container [type='radio']:checked,
3339
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3340
+ position: absolute;
3341
+ left: -9999px; }
3342
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3343
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3344
+ position: relative;
3345
+ padding-left: 28px;
3346
+ cursor: pointer;
3347
+ line-height: 20px;
3348
+ display: inline-block; }
3349
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3350
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3351
+ content: '';
3352
+ position: absolute;
3353
+ left: 1px;
3354
+ top: 1px;
3355
+ width: 18px;
3356
+ height: 18px;
3357
+ border: 1px solid #ddd;
3358
+ border-radius: 100%;
3359
+ background: #fff; }
3360
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3361
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3362
+ content: '';
3363
+ width: 12px;
3364
+ height: 12px;
3365
+ background: var(--react-autoql-accent-color, #26a7df);
3366
+ position: absolute;
3367
+ top: 4px;
3368
+ left: 4px;
3369
+ border-radius: 100%;
3370
+ transition: all 0.2s ease; }
3371
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3372
+ opacity: 0;
3373
+ transform: scale(0); }
3374
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3375
+ opacity: 1;
3376
+ transform: scale(1); }
3377
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3378
+ position: relative;
3379
+ display: inline-block;
3380
+ padding: 3px 12px;
3381
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3382
+ margin-left: -1px;
3383
+ transition: all 0.2s ease;
3384
+ cursor: pointer; }
3385
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3386
+ background-color: var(--react-autoql-accent-color, #26a7df);
3387
+ border-color: var(--react-autoql-accent-color, #26a7df);
3388
+ color: #fff;
3389
+ z-index: 3; }
3390
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3391
+ background-color: inherit;
3392
+ color: var(--react-autoql-accent-color, #26a7df);
3393
+ z-index: 3; }
3394
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3395
+ border-color: var(--react-autoql-accent-color, #26a7df);
3396
+ color: var(--react-autoql-accent-color, #26a7df);
3397
+ z-index: 2; }
3398
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3399
+ border-top-left-radius: 4px;
3400
+ border-bottom-left-radius: 4px;
3401
+ margin-left: 0; }
3402
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3403
+ border-top-right-radius: 4px;
3404
+ border-bottom-right-radius: 4px; }
3405
+
3404
3406
  .content {
3405
3407
  margin: 2rem; }
3406
3408
 
@@ -3558,82 +3560,163 @@ so we dont have to redraw the whole table */
3558
3560
  .react-autoql-toolbar-btn.green {
3559
3561
  color: #2ecc40; }
3560
3562
 
3561
- .react-autoql-toolbar-btn.red {
3562
- color: #e80000; }
3563
+ .react-autoql-toolbar-btn.red {
3564
+ color: #e80000; }
3565
+
3566
+ .react-autoql-toolbar-btn:hover {
3567
+ opacity: 0.7; }
3568
+
3569
+ .react-autoql-steps-container {
3570
+ margin: 10px; }
3571
+
3572
+ .react-autoql-step-container {
3573
+ position: relative;
3574
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3575
+ margin-left: 12px;
3576
+ padding-left: 20px;
3577
+ padding-bottom: 5px;
3578
+ transition: all 0.5s ease; }
3579
+ .react-autoql-step-container.complete {
3580
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3581
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3582
+ border-color: var(--react-autoql-accent-color, #26a7df);
3583
+ background: var(--react-autoql-accent-color, #26a7df);
3584
+ color: #fff; }
3585
+ .react-autoql-step-container.error {
3586
+ border-color: var(--react-autoql-warning-color); }
3587
+ .react-autoql-step-container.error .react-autoql-step-dot {
3588
+ border-color: var(--react-autoql-warning-color);
3589
+ background: var(--react-autoql-warning-color);
3590
+ color: white; }
3591
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3592
+ pointer-events: none;
3593
+ height: 10px;
3594
+ opacity: 0;
3595
+ margin: 0; }
3596
+
3597
+ .react-autoql-step-dot {
3598
+ position: absolute;
3599
+ top: 0;
3600
+ left: -10px;
3601
+ height: 20px;
3602
+ width: 20px;
3603
+ border-radius: 15px;
3604
+ background: var(--react-autoql-background-color-primary, #fff);
3605
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3606
+ transition: all 0.5s ease;
3607
+ font-size: 10.5px;
3608
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3609
+ text-align: center; }
3610
+
3611
+ .react-autoql-step-title-container:hover {
3612
+ cursor: pointer;
3613
+ transition: color 0.2s ease;
3614
+ color: var(--react-autoql-accent-color, #26a7df); }
3615
+
3616
+ .react-autoql-step-title {
3617
+ font-weight: 500;
3618
+ font-size: 15px;
3619
+ line-height: 15px;
3620
+ padding-top: 2px; }
3621
+
3622
+ .react-autoql-step-subtitle {
3623
+ font-size: 13px;
3624
+ padding-top: 6px;
3625
+ padding-bottom: 6px;
3626
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3627
+
3628
+ .react-autoql-step-content {
3629
+ margin: 15px;
3630
+ margin-top: 0; }
3631
+
3632
+ .react-autoql-step-content-container {
3633
+ transition-timing-function: ease;
3634
+ transition-property: height, opacity, margin;
3635
+ transition-duration: 0.5s;
3636
+ opacity: 1; }
3637
+
3638
+ .react-autoql-notification-rule-container {
3639
+ display: flex; }
3640
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3641
+ display: flex;
3642
+ flex-direction: column;
3643
+ flex: 1;
3644
+ width: 100%; }
3645
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3646
+ display: flex;
3647
+ flex: 1; }
3648
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3649
+ display: flex;
3650
+ padding: 2px 0;
3651
+ border-radius: 4px;
3652
+ transition: all 0.3s ease;
3653
+ flex: 1; }
3654
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3655
+ flex: 0;
3656
+ flex-basis: 33px; }
3657
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3658
+ flex: 1;
3659
+ margin-left: 4px; }
3660
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3661
+ cursor: pointer;
3662
+ opacity: 0.6;
3663
+ padding: 6px; }
3664
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3665
+ opacity: 1; }
3666
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3667
+ display: none; }
3668
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3669
+ margin: 0; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3671
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3672
+ + .react-autoql-rule-term-type-selector {
3673
+ color: var(--react-autoql-accent-color, #26a7df);
3674
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3675
+
3676
+ .read-only-rule-term {
3677
+ display: inline-block;
3678
+ border: 1px solid rgba(0, 0, 0, 0.06);
3679
+ background: rgba(0, 0, 0, 0.02);
3680
+ padding: 3px 7px;
3681
+ line-height: 1.5em;
3682
+ margin-right: 5px;
3683
+ margin-bottom: 2px;
3684
+ margin-top: 2px;
3685
+ border-radius: 4px; }
3686
+
3687
+ .expression-term-validation-error {
3688
+ padding: 0 10px;
3689
+ color: var(--react-autoql-warning-color); }
3690
+
3691
+ .spinner-loader {
3692
+ display: inline-block;
3693
+ width: 14px;
3694
+ height: 14px;
3695
+ margin-right: 6px; }
3696
+
3697
+ .spinner-loader:after {
3698
+ content: " ";
3699
+ display: block;
3700
+ width: 16px;
3701
+ height: 16px;
3702
+ margin: 0px;
3703
+ border-radius: 50%;
3704
+ border: 1px solid currentColor;
3705
+ border-color: currentColor transparent currentColor transparent;
3706
+ -webkit-animation: spinner-loader 1.2s linear infinite;
3707
+ animation: spinner-loader 1.2s linear infinite; }
3563
3708
 
3564
- .react-autoql-toolbar-btn:hover {
3565
- opacity: 0.7; }
3709
+ @-webkit-keyframes spinner-loader {
3710
+ 0% {
3711
+ transform: rotate(0deg); }
3712
+ 100% {
3713
+ transform: rotate(360deg); } }
3566
3714
 
3567
- .react-autoql-radio-btn-container {
3568
- display: inline-block;
3569
- border-radius: 4px; }
3570
- .react-autoql-radio-btn-container [type='radio']:checked,
3571
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3572
- position: absolute;
3573
- left: -9999px; }
3574
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3575
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3576
- position: relative;
3577
- padding-left: 28px;
3578
- cursor: pointer;
3579
- line-height: 20px;
3580
- display: inline-block; }
3581
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3582
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3583
- content: '';
3584
- position: absolute;
3585
- left: 1px;
3586
- top: 1px;
3587
- width: 18px;
3588
- height: 18px;
3589
- border: 1px solid #ddd;
3590
- border-radius: 100%;
3591
- background: #fff; }
3592
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3593
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3594
- content: '';
3595
- width: 12px;
3596
- height: 12px;
3597
- background: var(--react-autoql-accent-color, #26a7df);
3598
- position: absolute;
3599
- top: 4px;
3600
- left: 4px;
3601
- border-radius: 100%;
3602
- transition: all 0.2s ease; }
3603
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3604
- opacity: 0;
3605
- transform: scale(0); }
3606
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3607
- opacity: 1;
3608
- transform: scale(1); }
3609
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3610
- position: relative;
3611
- display: inline-block;
3612
- padding: 3px 12px;
3613
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3614
- margin-left: -1px;
3615
- transition: all 0.2s ease;
3616
- cursor: pointer; }
3617
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3618
- background-color: var(--react-autoql-accent-color, #26a7df);
3619
- border-color: var(--react-autoql-accent-color, #26a7df);
3620
- color: #fff;
3621
- z-index: 3; }
3622
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3623
- background-color: inherit;
3624
- color: var(--react-autoql-accent-color, #26a7df);
3625
- z-index: 3; }
3626
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3627
- border-color: var(--react-autoql-accent-color, #26a7df);
3628
- color: var(--react-autoql-accent-color, #26a7df);
3629
- z-index: 2; }
3630
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3631
- border-top-left-radius: 4px;
3632
- border-bottom-left-radius: 4px;
3633
- margin-left: 0; }
3634
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3635
- border-top-right-radius: 4px;
3636
- border-bottom-right-radius: 4px; }
3715
+ @keyframes spinner-loader {
3716
+ 0% {
3717
+ transform: rotate(0deg); }
3718
+ 100% {
3719
+ transform: rotate(360deg); } }
3637
3720
 
3638
3721
  .notification-read-only-group {
3639
3722
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3753,126 +3836,6 @@ so we dont have to redraw the whole table */
3753
3836
  opacity: 1;
3754
3837
  color: var(--react-autoql-accent-color); }
3755
3838
 
3756
- .react-autoql-notification-rule-container {
3757
- display: flex; }
3758
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3759
- display: flex;
3760
- flex-direction: column;
3761
- flex: 1;
3762
- width: 100%; }
3763
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3764
- display: flex;
3765
- flex: 1; }
3766
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3767
- display: flex;
3768
- padding: 2px 0;
3769
- border-radius: 4px;
3770
- transition: all 0.3s ease;
3771
- flex: 1; }
3772
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3773
- flex: 0;
3774
- flex-basis: 33px; }
3775
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3776
- flex: 1;
3777
- margin-left: 4px; }
3778
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3779
- cursor: pointer;
3780
- opacity: 0.6;
3781
- padding: 6px; }
3782
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3783
- opacity: 1; }
3784
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3785
- display: none; }
3786
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3787
- margin: 0; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3789
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3790
- + .react-autoql-rule-term-type-selector {
3791
- color: var(--react-autoql-accent-color, #26a7df);
3792
- border-color: var(--react-autoql-accent-color, #26a7df); }
3793
-
3794
- .read-only-rule-term {
3795
- display: inline-block;
3796
- border: 1px solid rgba(0, 0, 0, 0.06);
3797
- background: rgba(0, 0, 0, 0.02);
3798
- padding: 3px 7px;
3799
- line-height: 1.5em;
3800
- margin-right: 5px;
3801
- margin-bottom: 2px;
3802
- margin-top: 2px;
3803
- border-radius: 4px; }
3804
-
3805
- .expression-term-validation-error {
3806
- padding: 0 10px;
3807
- color: var(--react-autoql-warning-color); }
3808
-
3809
- .react-autoql-select {
3810
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3811
- border-radius: 4px;
3812
- background: var(--react-autoql-background-color-primary, white);
3813
- display: inline-block;
3814
- font-size: 13px;
3815
- line-height: 32px;
3816
- height: 34px;
3817
- margin: 0 3px;
3818
- padding: 0 11px;
3819
- color: var(--react-autoql-accent-color, #26a7df);
3820
- transition: all 0.2s ease;
3821
- cursor: pointer; }
3822
- .react-autoql-select:hover {
3823
- border-color: var(--react-autoql-accent-color, #26a7df); }
3824
-
3825
- .react-autoql-select-popup-container {
3826
- background: var(--react-autoql-background-color-primary, white);
3827
- padding: 10px 0;
3828
- max-height: 300px;
3829
- overflow-y: auto; }
3830
- .react-autoql-select-popup-container .react-autoql-select-option.active {
3831
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3832
- .react-autoql-select-popup-container .react-autoql-select-popup {
3833
- list-style-type: none;
3834
- width: 100%;
3835
- margin: 0;
3836
- padding: 0; }
3837
- .react-autoql-select-popup-container .react-autoql-select-popup li {
3838
- color: var(--react-autoql-text-color-primary);
3839
- width: 100%;
3840
- height: 35px;
3841
- line-height: 35px;
3842
- padding: 0 20px;
3843
- cursor: pointer; }
3844
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3845
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3846
-
3847
- .spinner-loader {
3848
- display: inline-block;
3849
- width: 14px;
3850
- height: 14px;
3851
- margin-right: 6px; }
3852
-
3853
- .spinner-loader:after {
3854
- content: " ";
3855
- display: block;
3856
- width: 16px;
3857
- height: 16px;
3858
- margin: 0px;
3859
- border-radius: 50%;
3860
- border: 1px solid currentColor;
3861
- border-color: currentColor transparent currentColor transparent;
3862
- -webkit-animation: spinner-loader 1.2s linear infinite;
3863
- animation: spinner-loader 1.2s linear infinite; }
3864
-
3865
- @-webkit-keyframes spinner-loader {
3866
- 0% {
3867
- transform: rotate(0deg); }
3868
- 100% {
3869
- transform: rotate(360deg); } }
3870
-
3871
- @keyframes spinner-loader {
3872
- 0% {
3873
- transform: rotate(0deg); }
3874
- 100% {
3875
- transform: rotate(360deg); } }
3876
3839
 
3877
3840
  .slack-modal-error-container,
3878
3841
  .slack-modal-empty-list-message {
@@ -4020,6 +3983,43 @@ so we dont have to redraw the whole table */
4020
3983
  width: 200px; }
4021
3984
 
4022
3985
 
3986
+ .react-autoql-select {
3987
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3988
+ border-radius: 4px;
3989
+ background: var(--react-autoql-background-color-primary, white);
3990
+ display: inline-block;
3991
+ font-size: 13px;
3992
+ line-height: 32px;
3993
+ height: 34px;
3994
+ margin: 0 3px;
3995
+ padding: 0 11px;
3996
+ color: var(--react-autoql-accent-color, #26a7df);
3997
+ transition: all 0.2s ease;
3998
+ cursor: pointer; }
3999
+ .react-autoql-select:hover {
4000
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4001
+
4002
+ .react-autoql-select-popup-container {
4003
+ background: var(--react-autoql-background-color-primary, white);
4004
+ padding: 10px 0;
4005
+ max-height: 300px;
4006
+ overflow-y: auto; }
4007
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
4008
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4009
+ .react-autoql-select-popup-container .react-autoql-select-popup {
4010
+ list-style-type: none;
4011
+ width: 100%;
4012
+ margin: 0;
4013
+ padding: 0; }
4014
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
4015
+ color: var(--react-autoql-text-color-primary);
4016
+ width: 100%;
4017
+ height: 35px;
4018
+ line-height: 35px;
4019
+ padding: 0 20px;
4020
+ cursor: pointer; }
4021
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4022
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4023
4023
 
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;