react-autoql 3.4.4 → 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,856 +1,772 @@
1
- .react-autoql-response-content-container:not(.html-content) {
2
- position: relative;
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); }
16
+
17
+ .autoql-condition-locking-menu-container
18
+ .react-autosuggest__suggestions-container--open {
19
+ transform: translateX(8%);
20
+ width: 90% !important; }
21
+
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; }
26
+
27
+ .react-autoql-drawer {
28
+ font-family: var(--react-autoql-font-family), sans-serif;
29
+ line-height: 22px; }
30
+
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; }
36
+
37
+ .react-autoql-drawer .react-autoql-drawer-content-container {
38
+ width: 100%;
39
+ height: 100%;
3
40
  display: flex;
41
+ background: var(--react-autoql-background-color-secondary);
42
+ overflow: hidden;
43
+ border-radius: 4px;
4
44
  flex-direction: column;
5
- justify-content: center;
6
- align-items: center;
7
- background-color: inherit;
8
- font-size: 14px;
9
- height: 100%;
45
+ justify-content: stretch; }
46
+
47
+ .react-autoql-drawer .chat-header-container {
48
+ display: flex;
49
+ justify-content: space-between;
10
50
  width: 100%;
11
- overflow: hidden;
12
- color: var(--react-autoql-text-color-primary); }
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; }
13
57
 
14
- .react-autoql-response-content-container.html-content {
58
+ .react-autoql-drawer .react-autoql-header-right-container {
59
+ display: flex;
60
+ justify-content: right;
61
+ width: 100px; }
62
+
63
+ .react-autoql-drawer .react-autoql-header-center-container {
15
64
  position: relative;
16
- background-color: inherit;
17
- text-align: left;
18
- font-size: 14px;
19
- height: 100%;
20
- width: 100%;
65
+ color: #fff;
66
+ line-height: 60px;
67
+ font-size: 18px;
68
+ letter-spacing: 0.05em;
69
+ font-weight: 600;
21
70
  overflow: hidden;
22
- color: var(--react-autoql-text-color-primary); }
23
- .react-autoql-response-content-container.html-content table th {
24
- border-bottom: 2px solid var(--react-autoql-border-color); }
25
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
26
- border-bottom: 1px solid var(--react-autoql-border-color); }
27
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
28
- border-right: 1px solid var(--react-autoql-border-color); }
29
- .react-autoql-response-content-container.html-content table th,
30
- .react-autoql-response-content-container.html-content table td {
31
- padding: 5px 10px; }
32
- .react-autoql-response-content-container.html-content * {
33
- font-size: inherit; }
34
- .react-autoql-response-content-container.html-content sup,
35
- .react-autoql-response-content-container.html-content sub {
36
- font-size: 10px; }
37
- .react-autoql-response-content-container.html-content > *:first-child {
38
- margin-top: 0 !important; }
39
- .react-autoql-response-content-container.html-content > *:last-child {
71
+ text-overflow: ellipsis;
72
+ white-space: nowrap; }
73
+
74
+ .react-autoql-drawer .header-title {
75
+ -webkit-animation: fadeIn 0.3s;
76
+ animation: fadeIn 0.3s; }
77
+
78
+ .react-autoql-drawer .react-autoql-header-left-container {
79
+ width: 100px; }
80
+
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; }
100
+
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;
40
109
  margin-bottom: 0 !important; }
41
- .react-autoql-response-content-container.html-content caption {
42
- display: table-caption;
43
- text-align: -webkit-center;
44
- padding-top: unset;
45
- padding-bottom: unset;
46
- color: unset;
47
- text-align: unset;
48
- caption-side: unset; }
49
110
 
50
- .react-autoql-response-content-container.table {
51
- max-height: 100vh !important;
52
- overflow-y: scroll;
53
- scrollbar-width: none; }
111
+ .react-autoql-drawer .chat-bar-container {
112
+ position: relative;
113
+ padding: 10px;
114
+ padding-top: 30px; }
54
115
 
55
- .react-autoql-response-content-container.table::-webkit-scrollbar {
56
- width: 0;
57
- 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; }
58
122
 
59
- .react-autoql-suggestion-btn {
60
- padding: 6px 14px;
61
- background: transparent;
62
- font-family: inherit;
63
- font-size: 12px;
64
- margin-bottom: 5px;
65
- outline: none !important;
66
- cursor: pointer;
67
- letter-spacing: 0.05em;
68
- transition: all 0.1s ease;
69
- border: 1px solid rgba(0, 0, 0, 0.15);
70
- border-radius: 5px;
71
- 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; }
72
130
 
73
- .react-autoql-suggestion-btn:hover {
74
- border-color: transparent;
75
- color: white;
76
- 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; }
77
146
 
78
- .react-autoql-help-link-btn {
79
- 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 {
80
165
  background: transparent;
81
- border-radius: 5px;
82
- font-family: inherit;
83
- font-size: 12px;
84
- margin-top: 5px;
85
- outline: none !important;
166
+ border: none;
167
+ color: white;
168
+ margin: 10px;
169
+ margin-right: 0;
170
+ font-size: 20px;
86
171
  cursor: pointer;
87
- letter-spacing: 0.05em;
88
- transition: all 0.1s ease;
89
- border-color: #e2e2e26e;
90
- color: inherit; }
172
+ outline: none !important; }
91
173
 
92
- .react-autoql-help-link-btn:hover {
174
+ .react-autoql-drawer .chat-header-container button:hover {
93
175
  opacity: 0.7; }
94
176
 
95
- .react-autoql-help-link-icon {
96
- width: 15px;
97
- height: 15px;
98
- margin-bottom: -3px;
99
- margin-right: 3px; }
177
+ .react-autoql-drawer .chat-header-container button svg {
178
+ width: 35px;
179
+ height: 35px; }
100
180
 
101
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
102
- color: var(--react-autoql-success-color); }
181
+ .topics-container {
182
+ margin: 5px 0; }
103
183
 
104
- .react-autoql-suggestion-message {
105
- height: 100%;
106
- width: 100%;
107
- word-break: break-word; }
184
+ .intro-qi-link {
185
+ cursor: pointer;
186
+ color: var(--react-autoql-accent-color); }
108
187
 
109
- .react-autoql-suggestions-select {
110
- position: relative;
111
- display: inline-block;
112
- height: 30px;
113
- background: none;
114
- outline: none !important;
115
- border: 1px solid;
116
- font-family: inherit;
117
- letter-spacing: 0.05em;
118
- color: #28a8e0;
119
- cursor: pointer;
120
- font-size: inherit; }
188
+ /* custom scrollbar */
189
+ .react-autoql-drawer .chat-message-container > div:last-child {
190
+ opacity: 0;
191
+ transition: opacity 200ms ease; }
121
192
 
122
- .no-columns-error-message {
123
- position: absolute;
124
- height: 100%;
125
- width: 100%;
126
- display: flex;
127
- justify-content: center;
128
- flex-direction: column;
129
- text-align: center;
130
- padding: 20px;
131
- font-size: 13px; }
132
- .no-columns-error-message .warning-icon {
133
- font-size: 22px;
134
- display: block;
135
- margin-bottom: -13px;
136
- text-align: center; }
137
- .no-columns-error-message .eye-icon {
138
- vertical-align: bottom;
139
- line-height: 18px; }
193
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
194
+ opacity: 1; }
140
195
 
141
- /* query validation */
142
- .react-autoql-query-validation-selector-container {
143
- display: inline-block;
144
- position: relative; }
196
+ /* rc-drawer */
197
+ .react-autoql-drawer .drawer-content {
198
+ background: white;
199
+ border-radius: 4px;
200
+ overflow: visible;
201
+ opacity: 1;
202
+ transition: opacity 0.3s ease; }
145
203
 
146
- .react-autoql-select-popup-container.query-validation-select {
147
- padding: 5px 0;
148
- letter-spacing: 0.03em;
149
- font-family: var(--react-autoql-font-family), sans-serif; }
150
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
151
- height: unset;
152
- font-size: 14px;
153
- line-height: 24px;
154
- padding: 0 15px; }
155
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
156
- color: #d84830; }
204
+ .react-autoql-drawer.closed .drawer-content {
205
+ opacity: 0; }
157
206
 
158
- .react-autoql-query-validation-query {
159
- text-align: center; }
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; }
160
226
 
161
- .react-autoql-query-validation-execute-btn {
162
- height: 38px;
163
- background: none;
164
- border-radius: 4px;
165
- margin-top: 24px;
166
- width: 100%;
167
- color: inherit;
168
- cursor: pointer;
169
- outline: none !important;
170
- border-color: #e2e2e26e;
171
- transition: all 0.2s ease; }
227
+ .react-autoql-drawer.drawer-right .drawer-handle {
228
+ left: -70px !important; }
172
229
 
173
- .react-autoql-query-validation-execute-btn:hover {
174
- border-color: #28a8e0; }
230
+ .react-autoql-drawer.drawer-left .drawer-handle {
231
+ right: -60px !important; }
175
232
 
176
- .react-autoql-execute-query-icon {
177
- font-size: 16px;
178
- vertical-align: middle !important;
179
- padding-right: 3px !important; }
180
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
181
- height: 19px;
182
- width: 19px;
183
- margin-top: 3px;
184
- margin-right: 4px;
185
- vertical-align: top;
186
- fill: var(--react-autoql-accent-color); }
233
+ .react-autoql-drawer.drawer-top .drawer-handle {
234
+ bottom: -60px !important; }
187
235
 
188
- .react-autoql-query-validation-select {
189
- position: relative;
190
- display: inline-block;
191
- height: 2em;
192
- background: none;
193
- outline: none !important;
194
- border: none;
195
- letter-spacing: 0.05em;
196
- font-family: inherit;
197
- font-size: inherit;
198
- margin: 0;
199
- padding: 0;
200
- border-radius: 0;
201
- border-bottom: 1px dashed;
202
- color: var(--react-autoql-accent-color); }
236
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
237
+ top: -60px !important; }
203
238
 
204
- .react-autoql-query-validation-delete-button {
205
- position: relative;
206
- cursor: pointer;
207
- margin-bottom: -2px; }
239
+ .react-autoql-drawer .drawer-handle.hide {
240
+ opacity: 0;
241
+ visibility: hidden; }
208
242
 
209
- .react-autoql-chart-tooltip {
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); }
247
+
248
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
249
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
250
+ left: 0; }
251
+
252
+ .react-autoql-drawer .drawer-content-wrapper {
253
+ background: transparent; }
254
+
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; }
259
+
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; }
264
+
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; }
292
+
293
+ .react-autoql-drawer .response-loading-container {
294
+ position: absolute;
295
+ bottom: 45px;
296
+ left: 20px; }
297
+
298
+ /* Tooltips */
299
+ .react-autoql-drawer-tooltip {
210
300
  font-family: var(--react-autoql-font-family), sans-serif;
211
301
  letter-spacing: 0.04em;
212
- line-height: 22px;
213
- font-size: 13px;
214
302
  padding: 7px 15px;
215
- transition: all 0.2s ease !important;
216
- text-align: left !important;
303
+ transition: none;
217
304
  opacity: 1 !important;
218
305
  z-index: 99999 !important;
219
306
  /* necessary to show up on top of rc drawer */ }
220
307
 
221
- .single-value-response {
222
- color: inherit;
223
- cursor: unset; }
224
- .single-value-response:hover {
225
- color: inherit; }
226
-
227
- .single-value-response.with-drilldown:hover {
228
- color: inherit;
229
- text-decoration: underline;
230
- font-weight: 600;
231
- cursor: pointer; }
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 */ }
232
319
 
233
- .react-autoql-query-validation-container {
234
- width: 100%; }
320
+ .react-autoql-condition-lock-menu {
321
+ color: var(--react-autoql-text-color-primary);
322
+ background: var(--react-autoql-background-color-primary); }
235
323
 
236
- .react-autoql-query-validation-description {
237
- margin-bottom: 14px; }
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; }
238
330
 
239
- .context-menu {
331
+ .clear-messages-confirm-popover {
332
+ color: var(--react-autoql-text-color-primary);
240
333
  background: var(--react-autoql-background-color-primary);
241
- /* height: 100px; */
242
- width: 150px;
243
- padding: 10px 0; }
244
-
245
- .context-menu-list {
246
- list-style-type: none;
247
- width: 100%;
248
- margin: 0;
249
- padding: 0; }
334
+ text-align: right;
335
+ padding: 18px;
336
+ width: 266px; }
250
337
 
251
- .context-menu-list li {
252
- color: var(--react-autoql-text-color-primary);
253
- width: 100%;
254
- height: 35px;
255
- line-height: 35px;
256
- padding: 0 20px;
257
- cursor: pointer; }
338
+ .react-autoql-confirm-text {
339
+ text-align: center; }
258
340
 
259
- .context-menu-list li:hover {
260
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
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; }
261
346
 
262
- #condition-lock-snackbar-success {
263
- visibility: hidden;
264
- min-width: 200px;
265
- line-height: 1 !important;
266
- font-size: 14px !important;
267
- background-color: var(--react-autoql-background-color-secondary);
268
- color: var(--react-autoql-success-color);
269
- text-align: center;
270
- border-radius: 4px;
271
- padding: 6px;
272
- position: fixed;
273
- display: block;
274
- z-index: 999999999;
275
- transform: translateX(-10%);
276
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
347
+ .react-autoql-confirm-icon {
348
+ color: #faad14 !important;
349
+ vertical-align: middle;
350
+ margin-right: 5px !important;
351
+ margin-bottom: 3px; }
277
352
 
278
- .autoql-condition-locking-menu-container
279
- .react-autosuggest__suggestions-container--open {
280
- transform: translateX(8%);
281
- width: 90% !important; }
353
+ .data-messenger-tab-container {
354
+ position: absolute;
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; }
282
376
 
283
- #condition-lock-snackbar-success.show {
284
- visibility: visible;
285
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
286
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
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; }
287
382
 
288
- .react-autoql-drawer {
289
- font-family: var(--react-autoql-font-family), sans-serif;
290
- line-height: 22px; }
383
+ .page-switcher-shadow-container.right {
384
+ top: 80px;
385
+ width: 60px; }
291
386
 
292
- .react-autoql-drawer.disable-selection {
293
- -webkit-user-select: none;
294
- -moz-user-select: none;
295
- -ms-user-select: none;
296
- user-select: none; }
387
+ .page-switcher-shadow-container.left {
388
+ top: 80px;
389
+ width: 60px; }
297
390
 
298
- .react-autoql-drawer .react-autoql-drawer-content-container {
299
- width: 100%;
300
- height: 100%;
301
- display: flex;
302
- background: var(--react-autoql-background-color-secondary);
391
+ /* Container holding the tabs */
392
+ .page-switcher-container {
393
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
303
394
  overflow: hidden;
304
- border-radius: 4px;
305
- flex-direction: column;
306
- justify-content: stretch; }
307
-
308
- .react-autoql-drawer .chat-header-container {
395
+ box-sizing: border-box;
309
396
  display: flex;
310
- justify-content: space-between;
311
- width: 100%;
312
- height: 60px;
313
- background: var(--react-autoql-accent-color);
314
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
315
- flex-grow: 0;
316
- flex-shrink: 0;
317
- z-index: 1; }
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); }
318
452
 
319
- .react-autoql-drawer .react-autoql-header-right-container {
453
+ /* Individual Tabs */
454
+ .page-switcher-container .tab {
320
455
  display: flex;
321
- justify-content: right;
322
- width: 100px; }
323
-
324
- .react-autoql-drawer .react-autoql-header-center-container {
325
- position: relative;
326
- color: #fff;
327
- line-height: 60px;
328
- font-size: 18px;
329
- letter-spacing: 0.05em;
330
- font-weight: 600;
331
- overflow: hidden;
332
- text-overflow: ellipsis;
333
- white-space: nowrap; }
456
+ justify-content: center;
457
+ align-items: center; }
334
458
 
335
- .react-autoql-drawer .header-title {
336
- -webkit-animation: fadeIn 0.3s;
337
- animation: fadeIn 0.3s; }
459
+ .data-messenger-notification-btn {
460
+ display: flex;
461
+ flex-direction: column;
462
+ justify-content: flex-start;
463
+ line-height: inherit; }
338
464
 
339
- .react-autoql-drawer .react-autoql-header-left-container {
340
- width: 100px; }
465
+ .page-switcher-container.right .tab,
466
+ .page-switcher-container.left .tab {
467
+ height: 65px; }
341
468
 
342
- .react-autoql-drawer .react-autoql-drawer-header-btn {
343
- line-height: 1em;
344
- font-weight: normal;
345
- float: none;
346
- opacity: 1; }
347
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
348
- width: 30px;
349
- height: 30px;
350
- padding-top: 3px; }
351
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
352
- position: absolute;
353
- right: 10px;
354
- -webkit-animation: fadeIn 0.3s;
355
- animation: fadeIn 0.3s; }
356
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
357
- width: 28px;
358
- height: 28px;
359
- padding-top: 7px;
360
- box-sizing: border-box; }
469
+ .page-switcher-container.top .tab,
470
+ .page-switcher-container.bottom .tab {
471
+ width: 65px; }
361
472
 
362
- .react-autoql-drawer .chat-message-container {
363
- scroll-behavior: smooth !important;
364
- max-height: calc(100% - 140px);
365
- overflow-y: auto;
366
- overflow-x: hidden;
367
- flex: 1; }
368
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
369
- overflow-x: hidden !important;
370
- margin-bottom: 0 !important; }
473
+ .page-switcher-container.bottom .tab {
474
+ background: var(--react-autoql-background-color-secondary);
475
+ color: var(--react-autoql-text-color-primary); }
371
476
 
372
- .react-autoql-drawer .chat-bar-container {
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;
373
482
  position: relative;
374
- padding: 10px;
375
- padding-top: 30px; }
483
+ z-index: 2; }
376
484
 
377
- .react-autoql-drawer .chat-drawer-chat-bar {
378
- flex-shrink: 0;
379
- flex-grow: 0;
380
- height: 60px;
381
- -webkit-animation: fadeIn 0.3s;
382
- animation: fadeIn 0.3s; }
485
+ .page-switcher-container.bottom .tab.active {
486
+ background: var(--react-autoql-accent-color);
487
+ color: #fff;
488
+ font-weight: bold; }
383
489
 
384
- .react-autoql-drawer .watermark {
385
- color: var(--react-autoql-text-color-primary);
386
- text-align: center;
387
- opacity: 0.2;
388
- top: 6px;
389
- width: calc(100% - 10px);
390
- font-size: 13px; }
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); } }
391
501
 
392
- .react-autoql-drawer .condition-list-container {
393
- position: absolute;
394
- border: 1px solid var(--react-autoql-text-color-primary);
395
- border-radius: 100rem;
396
- background-color: transparent;
397
- color: var(--react-autoql-text-color-primary);
398
- padding: 0 5px 0 5px;
399
- transition: background-color 250ms ease, box-shadow 250ms ease;
400
- z-index: 9999999;
401
- width: -webkit-fit-content;
402
- width: -moz-fit-content;
403
- width: fit-content;
404
- height: -webkit-fit-content;
405
- height: -moz-fit-content;
406
- height: fit-content; }
502
+ @-webkit-keyframes response-loading3 {
503
+ 0% {
504
+ transform: scale(1); }
505
+ 100% {
506
+ transform: scale(0); } }
407
507
 
408
- .condition-list-display {
409
- display: none;
410
- background-color: var(--react-autoql-background-color-primary);
411
- border-radius: 4px;
412
- padding: 5px;
413
- width: -webkit-fit-content;
414
- width: -moz-fit-content;
415
- width: fit-content;
416
- height: -webkit-fit-content;
417
- height: -moz-fit-content;
418
- height: fit-content;
419
- padding: 10px;
420
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
508
+ @keyframes response-loading3 {
509
+ 0% {
510
+ transform: scale(1); }
511
+ 100% {
512
+ transform: scale(0); } }
421
513
 
422
- .react-autoql-drawer .react-autoql-drawer:focus {
423
- outline: none; }
514
+ @-webkit-keyframes response-loading2 {
515
+ 0% {
516
+ transform: translate(0, 0); }
517
+ 100% {
518
+ transform: translate(19px, 0); } }
424
519
 
425
- .react-autoql-drawer .chat-header-container button {
426
- background: transparent;
427
- border: none;
428
- color: white;
429
- margin: 10px;
430
- margin-right: 0;
431
- font-size: 20px;
432
- cursor: pointer;
433
- outline: none !important; }
520
+ @keyframes response-loading2 {
521
+ 0% {
522
+ transform: translate(0, 0); }
523
+ 100% {
524
+ transform: translate(19px, 0); } }
434
525
 
435
- .react-autoql-drawer .chat-header-container button:hover {
436
- opacity: 0.7; }
526
+ @-webkit-keyframes scale-up-center {
527
+ 0% {
528
+ transform: scale(0); }
529
+ 100% {
530
+ transform: scale(1); } }
437
531
 
438
- .react-autoql-drawer .chat-header-container button svg {
439
- width: 35px;
440
- height: 35px; }
532
+ @keyframes scale-up-center {
533
+ 0% {
534
+ transform: scale(0); }
535
+ 100% {
536
+ transform: scale(1); } }
441
537
 
442
- .topics-container {
443
- margin: 5px 0; }
538
+ @-webkit-keyframes fadeIn {
539
+ 0% {
540
+ opacity: 0; }
541
+ 100% {
542
+ opacity: 1; } }
444
543
 
445
- .intro-qi-link {
446
- cursor: pointer;
447
- color: var(--react-autoql-accent-color); }
544
+ @keyframes fadeIn {
545
+ 0% {
546
+ opacity: 0; }
547
+ 100% {
548
+ opacity: 1; } }
448
549
 
449
- /* custom scrollbar */
450
- .react-autoql-drawer .chat-message-container > div:last-child {
451
- opacity: 0;
452
- transition: opacity 200ms ease; }
550
+ @-webkit-keyframes slideDown {
551
+ 0% {
552
+ transform: translateY(-100%); }
553
+ 100% {
554
+ transform: translateY(0%); } }
453
555
 
454
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
455
- opacity: 1; }
556
+ @keyframes slideDown {
557
+ 0% {
558
+ transform: translateY(-100%); }
559
+ 100% {
560
+ transform: translateY(0%); } }
456
561
 
457
- /* rc-drawer */
458
- .react-autoql-drawer .drawer-content {
459
- background: white;
460
- border-radius: 4px;
461
- overflow: visible;
462
- opacity: 1;
463
- transition: opacity 0.3s ease; }
562
+ @-webkit-keyframes snackbarFadein {
563
+ from {
564
+ top: 30px;
565
+ opacity: 0; }
566
+ to {
567
+ top: 60px;
568
+ opacity: 1; } }
464
569
 
465
- .react-autoql-drawer.closed .drawer-content {
466
- opacity: 0; }
570
+ @keyframes snackbarFadein {
571
+ from {
572
+ top: 30px;
573
+ opacity: 0; }
574
+ to {
575
+ top: 60px;
576
+ opacity: 1; } }
467
577
 
468
- .react-autoql-drawer .drawer-handle {
469
- transition: opacity 0.5s ease;
470
- overflow: hidden;
471
- width: 50px;
472
- height: 50px;
473
- border-radius: 50px !important;
474
- font-size: 22px; }
475
- .react-autoql-drawer .drawer-handle.default-logo {
476
- background-color: var(--react-autoql-accent-color, #26a7df);
477
- color: #fff; }
478
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
479
- position: absolute;
480
- vertical-align: top;
481
- top: 11px;
482
- left: 12px; }
483
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
484
- position: absolute;
485
- width: 26px;
486
- height: 26px; }
578
+ @-webkit-keyframes snackbarFadeout {
579
+ from {
580
+ top: 60px;
581
+ opacity: 1; }
582
+ to {
583
+ top: 30px;
584
+ opacity: 0; } }
487
585
 
488
- .react-autoql-drawer.drawer-right .drawer-handle {
489
- left: -70px !important; }
586
+ @keyframes snackbarFadeout {
587
+ from {
588
+ top: 60px;
589
+ opacity: 1; }
590
+ to {
591
+ top: 30px;
592
+ opacity: 0; } }
490
593
 
491
- .react-autoql-drawer.drawer-left .drawer-handle {
492
- right: -60px !important; }
594
+ .loading-container-centered {
595
+ height: 100%;
596
+ width: 100%;
597
+ display: flex;
598
+ flex-direction: column;
599
+ justify-content: center;
600
+ align-items: center; }
493
601
 
494
- .react-autoql-drawer.drawer-top .drawer-handle {
495
- bottom: -60px !important; }
602
+ .response-loading {
603
+ display: inline-block;
604
+ position: relative;
605
+ width: 64px;
606
+ height: 64px; }
496
607
 
497
- .react-autoql-drawer.drawer-bottom .drawer-handle {
498
- top: -60px !important; }
608
+ .response-loading div {
609
+ position: absolute;
610
+ top: 27px;
611
+ width: 11px;
612
+ height: 11px;
613
+ border-radius: 50%;
614
+ background: #e2e2e2;
615
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
616
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
499
617
 
500
- .react-autoql-drawer .drawer-handle.hide {
501
- opacity: 0;
502
- visibility: hidden; }
618
+ .response-loading div:nth-child(1) {
619
+ left: 6px;
620
+ -webkit-animation: response-loading1 0.6s infinite;
621
+ animation: response-loading1 0.6s infinite; }
503
622
 
504
- .react-autoql-drawer .drawer-handle-icon,
505
- .react-autoql-drawer .drawer-handle-icon::before,
506
- .react-autoql-drawer .drawer-handle-icon::after {
507
- background: var(--react-autoql-text-color-primary); }
623
+ .response-loading div:nth-child(2) {
624
+ left: 6px;
625
+ -webkit-animation: response-loading2 0.6s infinite;
626
+ animation: response-loading2 0.6s infinite; }
508
627
 
509
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
510
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
511
- left: 0; }
628
+ .response-loading div:nth-child(3) {
629
+ left: 26px;
630
+ -webkit-animation: response-loading2 0.6s infinite;
631
+ animation: response-loading2 0.6s infinite; }
512
632
 
513
- .react-autoql-drawer .drawer-content-wrapper {
514
- background: transparent; }
633
+ .response-loading div:nth-child(4) {
634
+ left: 45px;
635
+ -webkit-animation: response-loading3 0.6s infinite;
636
+ animation: response-loading3 0.6s infinite; }
515
637
 
516
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
517
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
518
- max-width: calc(100vw - 45px) !important;
519
- min-width: 400px !important; }
638
+ .react-autoql-dashboard-container {
639
+ background: var(--react-autoql-background-color-secondary);
640
+ height: 100%;
641
+ width: 100%;
642
+ overflow: hidden; }
520
643
 
521
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
522
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
523
- max-height: calc(100vh - 45px) !important;
524
- min-height: 400px !important; }
644
+ .react-autoql-dashboard-container.edit-mode {
645
+ padding-bottom: 200px; }
525
646
 
526
- .react-autoql-drawer-resize-handle {
527
- position: absolute;
528
- background: transparent; }
529
- .react-autoql-drawer-resize-handle.right {
530
- top: 0;
531
- left: -5px;
532
- width: 5px;
533
- height: 100vh;
534
- cursor: ew-resize; }
535
- .react-autoql-drawer-resize-handle.left {
536
- top: 0;
537
- right: -5px;
538
- width: 5px;
539
- height: 100vh;
540
- cursor: ew-resize; }
541
- .react-autoql-drawer-resize-handle.top {
542
- bottom: -5px;
543
- left: 0;
544
- height: 5px;
545
- width: 100vw;
546
- cursor: ns-resize; }
547
- .react-autoql-drawer-resize-handle.bottom {
548
- top: -5px;
549
- left: 0;
550
- height: 5px;
551
- width: 100vw;
552
- cursor: ns-resize; }
553
-
554
- .react-autoql-drawer .response-loading-container {
555
- position: absolute;
556
- bottom: 45px;
557
- left: 20px; }
647
+ .dashboard-drilldown-modal .ReactModal__Content {
648
+ top: unset !important;
649
+ margin-top: 20px !important;
650
+ max-height: 93vh !important; }
558
651
 
559
- /* Tooltips */
560
- .react-autoql-drawer-tooltip {
561
- font-family: var(--react-autoql-font-family), sans-serif;
562
- letter-spacing: 0.04em;
563
- padding: 7px 15px;
564
- transition: none;
565
- opacity: 1 !important;
566
- z-index: 99999 !important;
567
- /* necessary to show up on top of rc drawer */ }
652
+ .dashboard-drilldown-modal .react-autoql-modal-body {
653
+ padding: 0; }
568
654
 
569
- .interpretation-tooltip {
570
- font-family: var(--react-autoql-font-family), sans-serif;
571
- font-size: 12px;
572
- text-align: left;
573
- letter-spacing: 0.04em;
574
- padding: 7px 15px;
575
- max-width: 400px;
576
- opacity: 1 !important;
577
- transition: none;
578
- z-index: 99999 !important;
579
- /* necessary to show up on top of rc drawer */ }
655
+ .dashboard-drilldown-modal .react-autoql-table {
656
+ opacity: 0.9;
657
+ font-size: 11px; }
580
658
 
581
- .react-autoql-condition-lock-menu {
582
- color: var(--react-autoql-text-color-primary);
583
- background: var(--react-autoql-background-color-primary); }
659
+ .dashboard-drilldown-modal .splitter-layout {
660
+ height: calc(100% - 55px); }
584
661
 
585
- .react-tiny-popover-container {
586
- z-index: 9999;
587
- border: 1px solid #ababab52;
588
- border-radius: 4px;
589
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
590
- transition: opacity 0.2s ease 0s !important; }
662
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
663
+ padding: 20px;
664
+ padding-bottom: 10px; }
591
665
 
592
- .clear-messages-confirm-popover {
593
- color: var(--react-autoql-text-color-primary);
594
- background: var(--react-autoql-background-color-primary);
666
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
595
667
  text-align: right;
596
- padding: 18px;
597
- width: 266px; }
668
+ width: 100%;
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; }
598
678
 
599
- .react-autoql-confirm-text {
600
- text-align: center; }
679
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
680
+ padding: 20px;
681
+ padding-top: 10px;
682
+ overflow: hidden;
683
+ height: 100%; }
601
684
 
602
- .react-autoql-menu-text {
603
- text-align: center; }
604
- .react-autoql-menu-text:hover {
605
- color: var(--react-autoql-accent-color);
606
- cursor: pointer; }
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%; }
607
693
 
608
- .react-autoql-confirm-icon {
609
- color: #faad14 !important;
610
- vertical-align: middle;
611
- margin-right: 5px !important;
612
- margin-bottom: 3px; }
694
+ .empty-dashboard-new-tile-btn {
695
+ color: var(--react-autoql-accent-color);
696
+ font-weight: bold;
697
+ cursor: pointer; }
613
698
 
614
- .data-messenger-tab-container {
615
- position: absolute;
616
- background: transparent;
617
- display: flex;
618
- justify-content: center;
619
- align-items: center;
620
- pointer-events: none; }
621
- .data-messenger-tab-container.right {
622
- height: 100vh;
623
- width: 60px;
624
- left: -60px; }
625
- .data-messenger-tab-container.left {
626
- height: 100vh;
627
- width: 60px;
628
- right: -60px; }
629
- .data-messenger-tab-container.top {
630
- width: 100vw;
631
- height: 60px;
632
- bottom: -60px; }
633
- .data-messenger-tab-container.bottom {
634
- width: 100vw;
635
- height: 60px;
636
- top: -60px; }
699
+ .chat-voice-record-button {
700
+ width: 40px;
701
+ height: 40px;
702
+ border-radius: 24px;
703
+ margin: 10px;
704
+ margin-left: 0;
705
+ font-size: 18px;
706
+ line-height: 24px;
707
+ outline: none !important;
708
+ position: relative;
709
+ cursor: pointer;
710
+ overflow: hidden;
711
+ background: var(--react-autoql-accent-color);
712
+ color: white;
713
+ border: none;
714
+ flex-shrink: 0;
715
+ flex-grow: 0; }
637
716
 
638
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
639
- .page-switcher-shadow-container {
640
- position: absolute;
641
- background: transparent;
642
- overflow: hidden; }
717
+ .chat-voice-record-button:hover {
718
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
643
719
 
644
- .page-switcher-shadow-container.right {
645
- top: 80px;
646
- width: 60px; }
720
+ .chat-voice-record-button.listening {
721
+ background: #ff471a; }
647
722
 
648
- .page-switcher-shadow-container.left {
649
- top: 80px;
650
- width: 60px; }
723
+ .chat-voice-record-icon {
724
+ vertical-align: top; }
651
725
 
652
- /* Container holding the tabs */
653
- .page-switcher-container {
654
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
655
- overflow: hidden;
656
- box-sizing: border-box;
657
- display: flex;
658
- pointer-events: all; }
659
- .page-switcher-container .tab {
660
- position: relative;
661
- z-index: 1;
662
- background: var(--react-autoql-accent-color);
663
- color: #fff;
664
- opacity: 1;
665
- font-size: 22px;
666
- text-align: center;
667
- transform: translate(0, 0);
668
- cursor: pointer;
669
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
670
- transition-duration: 0.2s; }
671
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
672
- height: 22px;
673
- width: 23px; }
674
- .page-switcher-container.right {
675
- border-top-left-radius: 5px;
676
- border-bottom-left-radius: 5px;
677
- margin-top: 20px;
678
- margin-left: 20px;
679
- margin-bottom: 20px;
680
- flex-direction: column; }
681
- .page-switcher-container.right .tab {
682
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
683
- .page-switcher-container.left {
684
- border-top-right-radius: 5px;
685
- border-bottom-right-radius: 5px;
686
- margin-top: 20px;
687
- margin-right: 20px;
688
- margin-bottom: 20px;
689
- margin-left: -5px;
690
- flex-direction: column; }
691
- .page-switcher-container.left .tab {
692
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
693
- .page-switcher-container.top {
694
- border-bottom-right-radius: 5px;
695
- border-bottom-left-radius: 5px;
696
- margin-right: 20px;
697
- margin-left: 20px;
698
- margin-bottom: 20px;
699
- flex-direction: row;
700
- height: 40px; }
701
- .page-switcher-container.top .tab {
702
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
703
- .page-switcher-container.bottom {
704
- border-top-left-radius: 5px;
705
- border-top-right-radius: 5px;
706
- margin-top: 20px;
707
- margin-left: 20px;
708
- margin-right: 20px;
709
- flex-direction: row;
710
- height: 40px; }
711
- .page-switcher-container.bottom .tab {
712
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
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; }
713
732
 
714
- /* Individual Tabs */
715
- .page-switcher-container .tab {
716
- display: flex;
717
- justify-content: center;
718
- align-items: center; }
733
+ @-webkit-keyframes slide {
734
+ 0% {
735
+ transform: translateX(-100%); }
736
+ 100% {
737
+ transform: translateX(100%); } }
719
738
 
720
- .data-messenger-notification-btn {
721
- display: flex;
722
- flex-direction: column;
723
- justify-content: flex-start;
724
- line-height: inherit; }
739
+ @keyframes slide {
740
+ 0% {
741
+ transform: translateX(-100%); }
742
+ 100% {
743
+ transform: translateX(100%); } }
725
744
 
726
- .page-switcher-container.right .tab,
727
- .page-switcher-container.left .tab {
728
- height: 65px; }
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%; } }
729
757
 
730
- .page-switcher-container.top .tab,
731
- .page-switcher-container.bottom .tab {
732
- width: 65px; }
733
-
734
- .page-switcher-container.bottom .tab {
735
- background: var(--react-autoql-background-color-secondary);
736
- color: var(--react-autoql-text-color-primary); }
737
-
738
- .page-switcher-container .tab.active {
739
- background: var(--react-autoql-background-color-secondary);
740
- color: var(--react-autoql-text-color-primary);
741
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
742
- font-weight: bold;
743
- position: relative;
744
- z-index: 2; }
745
-
746
- .page-switcher-container.bottom .tab.active {
747
- background: var(--react-autoql-accent-color);
748
- color: #fff;
749
- font-weight: bold; }
750
-
751
- /* animations */
752
- @-webkit-keyframes response-loading1 {
753
- 0% {
754
- transform: scale(0); }
755
- 100% {
756
- transform: scale(1); } }
757
- @keyframes response-loading1 {
758
- 0% {
759
- transform: scale(0); }
760
- 100% {
761
- transform: scale(1); } }
762
-
763
- @-webkit-keyframes response-loading3 {
764
- 0% {
765
- transform: scale(1); }
766
- 100% {
767
- transform: scale(0); } }
768
-
769
- @keyframes response-loading3 {
770
- 0% {
771
- transform: scale(1); }
772
- 100% {
773
- transform: scale(0); } }
774
-
775
- @-webkit-keyframes response-loading2 {
776
- 0% {
777
- transform: translate(0, 0); }
778
- 100% {
779
- transform: translate(19px, 0); } }
780
-
781
- @keyframes response-loading2 {
782
- 0% {
783
- transform: translate(0, 0); }
784
- 100% {
785
- transform: translate(19px, 0); } }
786
-
787
- @-webkit-keyframes scale-up-center {
788
- 0% {
789
- transform: scale(0); }
790
- 100% {
791
- transform: scale(1); } }
792
-
793
- @keyframes scale-up-center {
794
- 0% {
795
- transform: scale(0); }
796
- 100% {
797
- transform: scale(1); } }
798
-
799
- @-webkit-keyframes fadeIn {
800
- 0% {
801
- opacity: 0; }
802
- 100% {
803
- opacity: 1; } }
804
-
805
- @keyframes fadeIn {
758
+ @keyframes move {
806
759
  0% {
760
+ left: 0;
807
761
  opacity: 0; }
808
- 100% {
809
- opacity: 1; } }
810
-
811
- @-webkit-keyframes slideDown {
812
- 0% {
813
- transform: translateY(-100%); }
814
- 100% {
815
- transform: translateY(0%); } }
816
-
817
- @keyframes slideDown {
818
- 0% {
819
- transform: translateY(-100%); }
820
- 100% {
821
- transform: translateY(0%); } }
822
-
823
- @-webkit-keyframes snackbarFadein {
824
- from {
825
- top: 30px;
762
+ 5% {
826
763
  opacity: 0; }
827
- to {
828
- top: 60px;
829
- opacity: 1; } }
830
-
831
- @keyframes snackbarFadein {
832
- from {
833
- top: 30px;
764
+ 48% {
765
+ opacity: 0.2; }
766
+ 80% {
834
767
  opacity: 0; }
835
- to {
836
- top: 60px;
837
- opacity: 1; } }
838
-
839
- @-webkit-keyframes snackbarFadeout {
840
- from {
841
- top: 60px;
842
- opacity: 1; }
843
- to {
844
- top: 30px;
845
- opacity: 0; } }
846
-
847
- @keyframes snackbarFadeout {
848
- from {
849
- top: 60px;
850
- opacity: 1; }
851
- to {
852
- top: 30px;
853
- opacity: 0; } }
768
+ 100% {
769
+ left: 82%; } }
854
770
 
855
771
  .react-autoql-bar-container {
856
772
  position: relative;
@@ -996,183 +912,267 @@
996
912
  left: 30px;
997
913
  top: 15px; }
998
914
 
999
- .loading-container-centered {
1000
- height: 100%;
1001
- width: 100%;
915
+ .react-autoql-response-content-container:not(.html-content) {
916
+ position: relative;
1002
917
  display: flex;
1003
918
  flex-direction: column;
1004
919
  justify-content: center;
1005
- align-items: center; }
920
+ align-items: center;
921
+ background-color: inherit;
922
+ font-size: 14px;
923
+ height: 100%;
924
+ width: 100%;
925
+ overflow: hidden;
926
+ color: var(--react-autoql-text-color-primary); }
1006
927
 
1007
- .response-loading {
1008
- display: inline-block;
928
+ .react-autoql-response-content-container.html-content {
1009
929
  position: relative;
1010
- width: 64px;
1011
- height: 64px; }
1012
-
1013
- .response-loading div {
1014
- position: absolute;
1015
- top: 27px;
1016
- width: 11px;
1017
- height: 11px;
1018
- border-radius: 50%;
1019
- background: #e2e2e2;
1020
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
1021
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
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; }
1022
963
 
1023
- .response-loading div:nth-child(1) {
1024
- left: 6px;
1025
- -webkit-animation: response-loading1 0.6s infinite;
1026
- animation: response-loading1 0.6s infinite; }
964
+ .react-autoql-response-content-container.table {
965
+ max-height: 100vh !important;
966
+ overflow-y: scroll;
967
+ scrollbar-width: none; }
1027
968
 
1028
- .response-loading div:nth-child(2) {
1029
- left: 6px;
1030
- -webkit-animation: response-loading2 0.6s infinite;
1031
- animation: response-loading2 0.6s infinite; }
969
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
970
+ width: 0;
971
+ height: 0; }
1032
972
 
1033
- .response-loading div:nth-child(3) {
1034
- left: 26px;
1035
- -webkit-animation: response-loading2 0.6s infinite;
1036
- animation: response-loading2 0.6s infinite; }
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; }
1037
986
 
1038
- .response-loading div:nth-child(4) {
1039
- left: 45px;
1040
- -webkit-animation: response-loading3 0.6s infinite;
1041
- animation: response-loading3 0.6s infinite; }
987
+ .react-autoql-suggestion-btn:hover {
988
+ border-color: transparent;
989
+ color: white;
990
+ background: var(--react-autoql-accent-color); }
1042
991
 
1043
- .chat-voice-record-button {
1044
- width: 40px;
1045
- height: 40px;
1046
- border-radius: 24px;
1047
- margin: 10px;
1048
- margin-left: 0;
1049
- font-size: 18px;
1050
- line-height: 24px;
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;
1051
999
  outline: none !important;
1052
- position: relative;
1053
1000
  cursor: pointer;
1054
- overflow: hidden;
1055
- background: var(--react-autoql-accent-color);
1056
- color: white;
1057
- border: none;
1058
- flex-shrink: 0;
1059
- flex-grow: 0; }
1001
+ letter-spacing: 0.05em;
1002
+ transition: all 0.1s ease;
1003
+ border-color: #e2e2e26e;
1004
+ color: inherit; }
1060
1005
 
1061
- .chat-voice-record-button:hover {
1062
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1006
+ .react-autoql-help-link-btn:hover {
1007
+ opacity: 0.7; }
1063
1008
 
1064
- .chat-voice-record-button.listening {
1065
- background: #ff471a; }
1009
+ .react-autoql-help-link-icon {
1010
+ width: 15px;
1011
+ height: 15px;
1012
+ margin-bottom: -3px;
1013
+ margin-right: 3px; }
1066
1014
 
1067
- .chat-voice-record-icon {
1068
- vertical-align: top; }
1015
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1016
+ color: var(--react-autoql-success-color); }
1069
1017
 
1070
- .react-autoql-tooltip {
1018
+ .react-autoql-suggestion-message {
1019
+ height: 100%;
1020
+ width: 100%;
1021
+ word-break: break-word; }
1022
+
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;
1071
1030
  font-family: inherit;
1072
- letter-spacing: 0.04em;
1073
- padding: 7px 15px;
1074
- opacity: 1 !important;
1075
- z-index: 99999 !important; }
1031
+ letter-spacing: 0.05em;
1032
+ color: #28a8e0;
1033
+ cursor: pointer;
1034
+ font-size: inherit; }
1076
1035
 
1077
- @-webkit-keyframes slide {
1078
- 0% {
1079
- transform: translateX(-100%); }
1080
- 100% {
1081
- transform: translateX(100%); } }
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; }
1082
1054
 
1083
- @keyframes slide {
1084
- 0% {
1085
- transform: translateX(-100%); }
1086
- 100% {
1087
- transform: translateX(100%); } }
1055
+ /* query validation */
1056
+ .react-autoql-query-validation-selector-container {
1057
+ display: inline-block;
1058
+ position: relative; }
1088
1059
 
1089
- @-webkit-keyframes move {
1090
- 0% {
1091
- left: 0;
1092
- opacity: 0; }
1093
- 5% {
1094
- opacity: 0; }
1095
- 48% {
1096
- opacity: 0.2; }
1097
- 80% {
1098
- opacity: 0; }
1099
- 100% {
1100
- left: 82%; } }
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; }
1101
1071
 
1102
- @keyframes move {
1103
- 0% {
1104
- left: 0;
1105
- opacity: 0; }
1106
- 5% {
1107
- opacity: 0; }
1108
- 48% {
1109
- opacity: 0.2; }
1110
- 80% {
1111
- opacity: 0; }
1112
- 100% {
1113
- left: 82%; } }
1072
+ .react-autoql-query-validation-query {
1073
+ text-align: center; }
1114
1074
 
1115
- .react-autoql-dashboard-container {
1116
- background: var(--react-autoql-background-color-secondary);
1117
- height: 100%;
1075
+ .react-autoql-query-validation-execute-btn {
1076
+ height: 38px;
1077
+ background: none;
1078
+ border-radius: 4px;
1079
+ margin-top: 24px;
1118
1080
  width: 100%;
1119
- overflow: hidden; }
1120
-
1121
- .react-autoql-dashboard-container.edit-mode {
1122
- padding-bottom: 200px; }
1081
+ color: inherit;
1082
+ cursor: pointer;
1083
+ outline: none !important;
1084
+ border-color: #e2e2e26e;
1085
+ transition: all 0.2s ease; }
1123
1086
 
1124
- .dashboard-drilldown-modal .ReactModal__Content {
1125
- top: unset !important;
1126
- margin-top: 20px !important;
1127
- max-height: 93vh !important; }
1087
+ .react-autoql-query-validation-execute-btn:hover {
1088
+ border-color: #28a8e0; }
1128
1089
 
1129
- .dashboard-drilldown-modal .react-autoql-modal-body {
1130
- 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); }
1131
1101
 
1132
- .dashboard-drilldown-modal .react-autoql-table {
1133
- opacity: 0.9;
1134
- 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); }
1135
1117
 
1136
- .dashboard-drilldown-modal .splitter-layout {
1137
- height: calc(100% - 55px); }
1118
+ .react-autoql-query-validation-delete-button {
1119
+ position: relative;
1120
+ cursor: pointer;
1121
+ margin-bottom: -2px; }
1138
1122
 
1139
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1140
- padding: 20px;
1141
- 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 */ }
1142
1134
 
1143
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1144
- text-align: right;
1145
- width: 100%;
1146
- padding-right: 20px; }
1147
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1148
- position: absolute;
1149
- bottom: 5px;
1150
- width: 100px;
1151
- right: 0; }
1152
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1153
- padding-top: 10px;
1154
- margin-bottom: -8px; }
1135
+ .single-value-response {
1136
+ color: inherit;
1137
+ cursor: unset; }
1138
+ .single-value-response:hover {
1139
+ color: inherit; }
1155
1140
 
1156
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1157
- padding: 20px;
1158
- padding-top: 10px;
1159
- overflow: hidden;
1160
- height: 100%; }
1141
+ .single-value-response.with-drilldown:hover {
1142
+ color: inherit;
1143
+ text-decoration: underline;
1144
+ font-weight: 600;
1145
+ cursor: pointer; }
1161
1146
 
1162
- .empty-dashboard-message-container {
1163
- font-family: var(--react-autoql-font-family);
1164
- color: var(--react-autoql-text-color-primary);
1165
- letter-spacing: 0.02em;
1166
- text-align: center;
1167
- padding: 100px;
1168
- height: 100%;
1147
+ .react-autoql-query-validation-container {
1169
1148
  width: 100%; }
1170
1149
 
1171
- .empty-dashboard-new-tile-btn {
1172
- color: var(--react-autoql-accent-color);
1173
- font-weight: bold;
1150
+ .react-autoql-query-validation-description {
1151
+ margin-bottom: 14px; }
1152
+
1153
+ .context-menu {
1154
+ background: var(--react-autoql-background-color-primary);
1155
+ /* height: 100px; */
1156
+ width: 150px;
1157
+ padding: 10px 0; }
1158
+
1159
+ .context-menu-list {
1160
+ list-style-type: none;
1161
+ width: 100%;
1162
+ margin: 0;
1163
+ padding: 0; }
1164
+
1165
+ .context-menu-list li {
1166
+ color: var(--react-autoql-text-color-primary);
1167
+ width: 100%;
1168
+ height: 35px;
1169
+ line-height: 35px;
1170
+ padding: 0 20px;
1174
1171
  cursor: pointer; }
1175
1172
 
1173
+ .context-menu-list li:hover {
1174
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1175
+
1176
1176
  .react-autoql-icon {
1177
1177
  position: relative;
1178
1178
  opacity: 1; }
@@ -1219,176 +1219,36 @@ span.react-autoql-icon {
1219
1219
  border-radius: 50%;
1220
1220
  box-sizing: content-box; }
1221
1221
 
1222
+ .notification-rule-add-btn-outer,
1223
+ .notification-rule-validate-btn-outer {
1224
+ text-align: center;
1225
+ border-style: dashed !important;
1226
+ height: 38px;
1227
+ line-height: 25px;
1228
+ margin: 0 !important;
1229
+ overflow: hidden; }
1230
+
1222
1231
  .notification-rule-outer-container {
1223
1232
  position: relative;
1224
1233
  border: 1px solid transparent;
1225
- border-radius: 4px;
1226
- padding-bottom: 5px; }
1234
+ border-radius: 4px; }
1235
+ .notification-rule-outer-container.outlined {
1236
+ border-color: rgba(0, 0, 0, 0.15);
1237
+ padding: 0 20px;
1238
+ padding-bottom: 12px; }
1227
1239
 
1228
- .expression-error-message {
1229
- padding-left: 5px; }
1240
+ .notification-outer-all-any {
1241
+ position: absolute;
1242
+ left: 0;
1243
+ top: 50%; }
1244
+
1245
+ .notification-first-group-btn-container {
1246
+ display: flex;
1247
+ justify-content: space-between; }
1230
1248
 
1231
1249
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
1250
  border: none; }
1233
1251
 
1234
- .react-autoql-notifications-button-container {
1235
- position: relative;
1236
- display: inline-block;
1237
- font-size: inherit;
1238
- line-height: 1em;
1239
- width: 1em; }
1240
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1241
- font-size: 1em;
1242
- line-height: 0;
1243
- vertical-align: bottom; }
1244
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1245
- position: absolute;
1246
- border: 2px solid #fff;
1247
- background: #f5222d;
1248
- border-radius: 6.3em;
1249
- line-height: 1.3em;
1250
- left: 0.6em;
1251
- top: -0.8em;
1252
- padding: 0.15em 0.5em;
1253
- text-align: center;
1254
- color: white;
1255
- font-size: 0.5em; }
1256
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1257
- position: absolute;
1258
- display: inline-block;
1259
- border: 2px solid #fff;
1260
- background: #f5222d;
1261
- border-radius: 50%;
1262
- height: 0.6em;
1263
- width: 0.6em;
1264
- left: 0.5em;
1265
- top: -2px; }
1266
-
1267
- .notification-list-loading-container {
1268
- text-align: center;
1269
- padding-top: 100px;
1270
- color: var(--react-autoql-text-color-primary);
1271
- height: 100%;
1272
- overflow: hidden;
1273
- background: var(--react-autoql-background-color-secondary); }
1274
-
1275
- .empty-notifications-message {
1276
- color: var(--react-autoql-text-color-primary);
1277
- text-align: center;
1278
- margin-top: 75px; }
1279
- .empty-notifications-message div {
1280
- opacity: 0.6; }
1281
- .empty-notifications-message .empty-notifications-title {
1282
- font-size: 16px;
1283
- font-weight: bold;
1284
- margin-bottom: 5px; }
1285
- .empty-notifications-message .empty-notifications-img {
1286
- width: 250px;
1287
- height: 250px; }
1288
-
1289
- .react-autoql-notification-list-container {
1290
- height: 100%;
1291
- padding: 20px;
1292
- overflow-y: auto;
1293
- background: var(--react-autoql-background-color-secondary); }
1294
-
1295
- .react-autoql-notification-dismiss-all {
1296
- text-align: right;
1297
- margin-bottom: 12px;
1298
- padding-right: 10px;
1299
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1300
- transition: color 0.1s ease; }
1301
- .react-autoql-notification-dismiss-all span {
1302
- opacity: 0.8;
1303
- cursor: pointer; }
1304
- .react-autoql-notification-dismiss-all span:hover {
1305
- opacity: 1; }
1306
-
1307
- .react-autoql-notification-display-name-input {
1308
- width: 100%; }
1309
-
1310
- .react-autoql-notification-message-input {
1311
- width: 100%; }
1312
-
1313
- .react-autoql-notification-list-item:nth-of-type(0) {
1314
- -webkit-animation-delay: 0s;
1315
- animation-delay: 0s; }
1316
-
1317
- .react-autoql-notification-list-item:nth-of-type(1) {
1318
- -webkit-animation-delay: 0.1s;
1319
- animation-delay: 0.1s; }
1320
-
1321
- .react-autoql-notification-list-item:nth-of-type(2) {
1322
- -webkit-animation-delay: 0.2s;
1323
- animation-delay: 0.2s; }
1324
-
1325
- .react-autoql-notification-list-item:nth-of-type(3) {
1326
- -webkit-animation-delay: 0.3s;
1327
- animation-delay: 0.3s; }
1328
-
1329
- .react-autoql-notification-list-item:nth-of-type(4) {
1330
- -webkit-animation-delay: 0.4s;
1331
- animation-delay: 0.4s; }
1332
-
1333
- .react-autoql-notification-list-item:nth-of-type(5) {
1334
- -webkit-animation-delay: 0.5s;
1335
- animation-delay: 0.5s; }
1336
-
1337
- .react-autoql-notification-list-item:nth-of-type(6) {
1338
- -webkit-animation-delay: 0.6s;
1339
- animation-delay: 0.6s; }
1340
-
1341
- .react-autoql-notification-list-item:nth-of-type(7) {
1342
- -webkit-animation-delay: 0.7s;
1343
- animation-delay: 0.7s; }
1344
-
1345
- .react-autoql-notification-list-item:nth-of-type(8) {
1346
- -webkit-animation-delay: 0.8s;
1347
- animation-delay: 0.8s; }
1348
-
1349
- .react-autoql-notification-list-item:nth-of-type(9) {
1350
- -webkit-animation-delay: 0.9s;
1351
- animation-delay: 0.9s; }
1352
-
1353
- .react-autoql-notification-list-item:nth-of-type(10) {
1354
- -webkit-animation-delay: 1s;
1355
- animation-delay: 1s; }
1356
-
1357
- @-webkit-keyframes slideIn {
1358
- 0% {
1359
- opacity: 0;
1360
- top: 500px; }
1361
- 100% {
1362
- opacity: 1;
1363
- top: 0; } }
1364
-
1365
- .react-autoql-step-container a {
1366
- color: var(--react-autoql-accent-color, #26a7df); }
1367
-
1368
- .frequency-date-select-container {
1369
- margin-top: 10px; }
1370
-
1371
- .notification-frequency-step {
1372
- display: flex; }
1373
- .notification-frequency-step .frequency-category-select {
1374
- position: relative;
1375
- padding-top: 9px; }
1376
- .notification-frequency-step .notification-frequency-select {
1377
- margin-left: 8px; }
1378
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1379
- line-height: 33px; }
1380
- .notification-frequency-step .frequency-repeat-follow-text {
1381
- line-height: 32px;
1382
- vertical-align: top; }
1383
- .notification-frequency-step .frequency-settings-container {
1384
- flex: 0 1 400px; }
1385
-
1386
- .schedule-builder-timezone-section {
1387
- margin: 10px 5px; }
1388
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1389
- display: inline-block;
1390
- width: 300px; }
1391
-
1392
1252
  .react-autoql-notification-list-item {
1393
1253
  display: flex;
1394
1254
  flex-direction: column;
@@ -1606,128 +1466,103 @@ span.react-autoql-icon {
1606
1466
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1607
1467
  margin-bottom: -1px; }
1608
1468
 
1609
- .react-autoql-notification-settings {
1610
- background-color: var(--react-autoql-background-color-secondary);
1469
+ .notification-list-loading-container {
1470
+ text-align: center;
1471
+ padding-top: 100px;
1611
1472
  color: var(--react-autoql-text-color-primary);
1612
- padding-top: 20px;
1613
- height: 100%; }
1614
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1615
- margin: 20px;
1616
- margin-top: 10px;
1617
- border-radius: 4px;
1618
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1619
- background-color: var(--react-autoql-background-color-primary);
1620
- overflow: hidden; }
1621
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1622
- height: 55px;
1623
- line-height: 55px;
1624
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1625
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1626
- margin-right: 10px;
1627
- cursor: pointer; }
1628
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1629
- padding-right: 20px;
1630
- font-size: 17px;
1631
- opacity: 1;
1632
- cursor: pointer;
1633
- color: var(--react-autoql-accent-color); }
1634
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1635
- background: rgba(0, 0, 0, 0.01); }
1636
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1637
- opacity: 0;
1638
- margin-right: 20px;
1639
- font-size: 16px;
1640
- transition: all 0.2s ease;
1641
- color: var(--react-autoql-text-color-primary);
1642
- cursor: pointer; }
1643
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1644
- color: var(--react-autoql-accent-color);
1645
- opacity: 1 !important; }
1646
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1647
- opacity: 0.5; }
1648
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1649
- display: flex;
1650
- justify-content: space-between;
1651
- height: 56px;
1652
- padding-left: 25px;
1653
- padding-right: 8px;
1654
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1655
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1656
- margin-bottom: 4px;
1657
- margin-right: 8px; }
1658
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1659
- margin-bottom: 4px;
1660
- margin-right: 8px;
1661
- opacity: 0.5;
1662
- pointer-events: none; }
1663
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1664
- display: flex;
1665
- justify-content: space-between;
1666
- align-items: center;
1667
- padding: 5px 20px;
1668
- padding-bottom: 0;
1669
- color: var(--react-autoql-text-color-primary); }
1670
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1671
- display: inline-block;
1672
- height: 35px;
1673
- width: 35px;
1674
- border-radius: 20px;
1675
- background: var(--react-autoql-accent-color, #26a7df);
1676
- color: white;
1677
- line-height: 38px;
1678
- text-align: center;
1679
- font-size: 20px;
1680
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1681
- transition: all 0.2s ease;
1682
- margin-right: 5px;
1683
- cursor: pointer; }
1684
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1685
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1686
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1687
- white-space: nowrap;
1688
- overflow: hidden;
1689
- text-overflow: ellipsis;
1690
- padding-right: 10px; }
1691
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1692
- opacity: 0.5; }
1693
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1694
- vertical-align: middle;
1695
- margin-bottom: 4px;
1696
- height: 18px; }
1697
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1698
- display: flex;
1699
- align-items: center;
1700
- margin-top: -25px; }
1473
+ height: 100%;
1474
+ overflow: hidden;
1475
+ background: var(--react-autoql-background-color-secondary); }
1701
1476
 
1702
- .notification-rule-add-btn-outer,
1703
- .notification-rule-validate-btn-outer {
1477
+ .empty-notifications-message {
1478
+ color: var(--react-autoql-text-color-primary);
1704
1479
  text-align: center;
1705
- border-style: dashed !important;
1706
- height: 38px;
1707
- line-height: 25px;
1708
- margin: 0 !important;
1709
- overflow: hidden; }
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; }
1710
1490
 
1711
- .notification-rule-outer-container {
1712
- position: relative;
1713
- border: 1px solid transparent;
1714
- border-radius: 4px; }
1715
- .notification-rule-outer-container.outlined {
1716
- border-color: rgba(0, 0, 0, 0.15);
1717
- padding: 0 20px;
1718
- padding-bottom: 12px; }
1491
+ .react-autoql-notification-list-container {
1492
+ height: 100%;
1493
+ padding: 20px;
1494
+ overflow-y: auto;
1495
+ background: var(--react-autoql-background-color-secondary); }
1719
1496
 
1720
- .notification-outer-all-any {
1721
- position: absolute;
1722
- left: 0;
1723
- top: 50%; }
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; }
1724
1508
 
1725
- .notification-first-group-btn-container {
1726
- display: flex;
1727
- justify-content: space-between; }
1509
+ .react-autoql-notification-display-name-input {
1510
+ width: 100%; }
1728
1511
 
1729
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1730
- border: none; }
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; } }
1731
1566
 
1732
1567
  .notification-modal-content .react-autoql-step-content p {
1733
1568
  margin-bottom: 0.5em;
@@ -2251,103 +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-btn {
2255
- border-radius: 4px;
2256
- cursor: pointer;
2257
- outline: none !important;
2258
- transition: all 0.2s ease;
2259
- width: auto;
2260
- display: inline-block; }
2089
+ .react-autoql-notification-settings {
2090
+ background-color: var(--react-autoql-background-color-secondary);
2091
+ color: var(--react-autoql-text-color-primary);
2092
+ padding-top: 20px;
2093
+ height: 100%; }
2094
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
2095
+ margin: 20px;
2096
+ margin-top: 10px;
2097
+ border-radius: 4px;
2098
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2099
+ background-color: var(--react-autoql-background-color-primary);
2100
+ overflow: hidden; }
2101
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
2102
+ height: 55px;
2103
+ line-height: 55px;
2104
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
2105
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
2106
+ margin-right: 10px;
2107
+ cursor: pointer; }
2108
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
2109
+ padding-right: 20px;
2110
+ font-size: 17px;
2111
+ opacity: 1;
2112
+ cursor: pointer;
2113
+ color: var(--react-autoql-accent-color); }
2114
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
2115
+ background: rgba(0, 0, 0, 0.01); }
2116
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
2117
+ opacity: 0;
2118
+ margin-right: 20px;
2119
+ font-size: 16px;
2120
+ transition: all 0.2s ease;
2121
+ color: var(--react-autoql-text-color-primary);
2122
+ cursor: pointer; }
2123
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
2124
+ color: var(--react-autoql-accent-color);
2125
+ opacity: 1 !important; }
2126
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
2127
+ opacity: 0.5; }
2128
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
2129
+ display: flex;
2130
+ justify-content: space-between;
2131
+ height: 56px;
2132
+ padding-left: 25px;
2133
+ padding-right: 8px;
2134
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2135
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
2136
+ margin-bottom: 4px;
2137
+ margin-right: 8px; }
2138
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
2139
+ margin-bottom: 4px;
2140
+ margin-right: 8px;
2141
+ opacity: 0.5;
2142
+ pointer-events: none; }
2143
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
2144
+ display: flex;
2145
+ justify-content: space-between;
2146
+ align-items: center;
2147
+ padding: 5px 20px;
2148
+ padding-bottom: 0;
2149
+ color: var(--react-autoql-text-color-primary); }
2150
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
2151
+ display: inline-block;
2152
+ height: 35px;
2153
+ width: 35px;
2154
+ border-radius: 20px;
2155
+ background: var(--react-autoql-accent-color, #26a7df);
2156
+ color: white;
2157
+ line-height: 38px;
2158
+ text-align: center;
2159
+ font-size: 20px;
2160
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2161
+ transition: all 0.2s ease;
2162
+ margin-right: 5px;
2163
+ cursor: pointer; }
2164
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
2165
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
2166
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
2167
+ white-space: nowrap;
2168
+ overflow: hidden;
2169
+ text-overflow: ellipsis;
2170
+ padding-right: 10px; }
2171
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
2172
+ opacity: 0.5; }
2173
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
2174
+ vertical-align: middle;
2175
+ margin-bottom: 4px;
2176
+ height: 18px; }
2177
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
2178
+ display: flex;
2179
+ align-items: center;
2180
+ margin-top: -25px; }
2261
2181
 
2262
- .react-autoql-btn.disabled {
2263
- opacity: 0.4;
2264
- cursor: not-allowed;
2265
- pointer-events: none; }
2182
+ .react-autoql-step-container a {
2183
+ color: var(--react-autoql-accent-color, #26a7df); }
2266
2184
 
2267
- .react-autoql-btn.small {
2268
- padding: 2px 8px;
2269
- margin: 2px 3px; }
2185
+ .frequency-date-select-container {
2186
+ margin-top: 10px; }
2270
2187
 
2271
- .react-autoql-btn.large {
2272
- padding: 5px 16px;
2273
- margin: 2px 5px; }
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; }
2274
2202
 
2275
- .react-autoql-btn.default {
2276
- color: inherit;
2277
- border: 1px solid var(--react-autoql-border-color);
2278
- background: inherit; }
2279
- .react-autoql-btn.default:hover {
2280
- border-color: var(--react-autoql-accent-color);
2281
- color: var(--react-autoql-accent-color); }
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; }
2282
2208
 
2283
- .react-autoql-btn.primary {
2284
- background: var(--react-autoql-accent-color);
2285
- border: 1px solid var(--react-autoql-accent-color);
2286
- color: white; }
2287
- .react-autoql-btn.primary:hover {
2288
- opacity: 0.8; }
2289
-
2290
- .react-autoql-btn.danger {
2291
- color: var(--react-autoql-danger-color, #ca0b00);
2292
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
- background: inherit; }
2294
- .react-autoql-btn.danger:hover {
2295
- background-color: var(--react-autoql-danger-color, #ca0b00);
2296
- color: #fff; }
2297
-
2298
- .react-autoql-cascader {
2209
+ .react-autoql-notifications-button-container {
2299
2210
  position: relative;
2300
- white-space: nowrap;
2301
- overflow: hidden;
2302
- min-width: 300px; }
2303
- .react-autoql-cascader .options-container {
2304
- 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;
2305
2233
  display: inline-block;
2306
- vertical-align: top;
2307
- padding: 0 10px;
2308
- margin: 10px 0;
2309
- width: 100%;
2310
- max-width: calc(100% - 20px);
2311
- white-space: pre-wrap; }
2312
- .react-autoql-cascader .options-container.hidden {
2313
- max-width: 0; }
2314
- .react-autoql-cascader .options-container.hidden span {
2315
- white-space: nowrap; }
2316
- .react-autoql-cascader .options-container.hidden .option {
2317
- opacity: 0;
2318
- pointer-events: none; }
2319
- .react-autoql-cascader .options-container .options-title {
2320
- padding: 4px;
2321
- padding-left: 10px;
2322
- font-weight: 600; }
2323
- .react-autoql-cascader .options-container .cascader-back-arrow {
2324
- position: absolute;
2325
- cursor: pointer;
2326
- top: 15px;
2327
- left: 0; }
2328
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2329
- opacity: 0.8; }
2330
- .react-autoql-cascader .options-container .option {
2331
- cursor: pointer;
2332
- padding: 4px;
2333
- display: flex;
2334
- justify-content: space-between;
2335
- border-radius: 2px;
2336
- padding-left: 10px; }
2337
- .react-autoql-cascader .options-container .option .option-arrow {
2338
- opacity: 0.7; }
2339
- .react-autoql-cascader .options-container .option .option-execute-icon {
2340
- opacity: 0;
2341
- color: #fff;
2342
- font-size: 16px;
2343
- vertical-align: middle; }
2344
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2345
- background-color: var(--react-autoql-accent-color, #26a7df);
2346
- color: #fff; }
2347
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2348
- opacity: 1; }
2349
- .react-autoql-cascader .options-container:not(:last-child) {
2350
- 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; }
2351
2253
 
2352
2254
  .query-tips-page-container {
2353
2255
  height: 100%;
@@ -2521,268 +2423,99 @@ span.react-autoql-icon {
2521
2423
  100% {
2522
2424
  opacity: 1; } }
2523
2425
 
2524
- .react-autoql-table-container {
2525
- height: 100%;
2526
- max-width: 100%;
2527
- background-color: inherit; }
2528
-
2529
- .react-autoql-table {
2530
- margin-bottom: 0; }
2426
+ .react-autoql-condition-locking-input {
2427
+ padding: 5px;
2428
+ padding-left: 20px;
2429
+ margin: 10px;
2430
+ height: 32px;
2431
+ box-sizing: border-box;
2432
+ border-radius: 24px;
2433
+ font-size: 12px;
2434
+ font-family: inherit;
2435
+ letter-spacing: 0.04em;
2436
+ outline: none !important;
2437
+ width: calc(100% - 60px);
2438
+ font-family: inherit;
2439
+ /* Default styles outside of data messenger */
2440
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2441
+ background: var(--react-autoql-background-color-primary);
2442
+ color: #5d5d5d; }
2531
2443
 
2532
- /* tabulator */
2533
- .react-autoql-table.tabulator,
2534
- .react-autoql-table.tabulator .tabulator-row,
2535
- .react-autoql-table.tabulator .tabulator-header,
2536
- .react-autoql-table.tabulator .tabulator-headers,
2537
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2538
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2539
- background-color: inherit; }
2444
+ .condition-table {
2445
+ min-width: 95%;
2446
+ margin: 10px auto; }
2540
2447
 
2541
- .react-autoql-table-container.supports-drilldown
2542
- .react-autoql-table.tabulator
2543
- .tabulator-row.tabulator-unselectable:hover {
2544
- cursor: pointer !important;
2545
- background-color: var(--react-autoql-hover-color) !important; }
2448
+ .condition-table thead {
2449
+ padding-left: 10px; }
2546
2450
 
2547
- .react-autoql-table.tabulator
2548
- .tabulator-header
2549
- .tabulator-col.tabulator-sortable:hover {
2550
- background-color: var(--react-autoql-hover-color) !important; }
2451
+ .condition-table th {
2452
+ text-align: left;
2453
+ padding: 4px;
2454
+ margin: 0 10px 0 10px;
2455
+ font-weight: 800; }
2551
2456
 
2552
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2553
- .react-autoql-table.tabulator .tabulator-cell {
2554
- border-color: var(--react-autoql-border-color); }
2457
+ .react-autoql-accept-conditions-button {
2458
+ text-align: right;
2459
+ margin-bottom: 12px;
2460
+ padding-right: 10px;
2461
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2462
+ transition: color 0.1s ease; }
2463
+ .react-autoql-accept-conditions-button span {
2464
+ opacity: 0.8;
2465
+ cursor: pointer; }
2466
+ .react-autoql-accept-conditions-button span:hover {
2467
+ opacity: 1; }
2555
2468
 
2556
- .react-autoql-table.tabulator .tabulator-header {
2557
- border-bottom: 2px solid var(--react-autoql-border-color); }
2469
+ .condition-table tr {
2470
+ cursor: pointer; }
2471
+ .condition-table tr:hover {
2472
+ background: var(--react-autoql-accent-color);
2473
+ color: white; }
2558
2474
 
2559
- .react-autoql-table.tabulator {
2560
- background-color: inherit;
2561
- height: 100%; }
2475
+ .condition-table td {
2476
+ text-align: left;
2477
+ padding: 4px;
2478
+ margin: 0 10px 0 10px;
2479
+ padding-left: 10px; }
2562
2480
 
2563
- .react-autoql-table .tabulator-row {
2564
- /* user-select: none; This breaks copy/paste */
2565
- border-bottom: 1px solid var(--react-autoql-border-color); }
2481
+ .condition-list {
2482
+ padding: 0;
2483
+ margin: 0 auto; }
2566
2484
 
2567
- .tabulator-cell:not(:first-child) {
2568
- border-left: 1px solid !important;
2569
- border-color: rgba(0, 0, 0, 0.06) !important; }
2485
+ .condition-list-item {
2486
+ cursor: pointer;
2487
+ padding: 4px;
2488
+ margin: 0 10px 0 10px;
2489
+ display: flex;
2490
+ justify-content: space-between;
2491
+ border-radius: 2px;
2492
+ padding-left: 10px; }
2493
+ .condition-list-item:hover {
2494
+ background: var(--react-autoql-accent-color);
2495
+ color: white; }
2570
2496
 
2571
- .react-autoql-table .tabulator-tableHolder {
2572
- max-height: calc(100% - 38px) !important;
2573
- background-color: inherit; }
2497
+ .empty-condition-list {
2498
+ text-align: center;
2499
+ padding: 4px;
2500
+ margin: 0 20px 0 20px; }
2574
2501
 
2575
- .react-autoql-table.tabulator
2576
- .tabulator-header
2577
- .tabulator-col
2578
- .tabulator-col-content {
2579
- padding: 8px 5px; }
2502
+ .autoql-close-button {
2503
+ background-color: inherit;
2504
+ border: none;
2505
+ text-align: left;
2506
+ font-size: 20px;
2507
+ margin-top: -20px;
2508
+ float: none !important;
2509
+ color: inherit; }
2580
2510
 
2581
- .react-autoql-table.tabulator
2582
- .tabulator-header
2583
- .tabulator-col
2584
- .tabulator-col-content
2585
- .tabulator-arrow {
2586
- opacity: 0;
2587
- border-left: 4px solid transparent !important;
2588
- border-right: 4px solid transparent !important;
2589
- right: 4px;
2590
- top: calc(50% - 3px); }
2511
+ .react-tiny-popover-container {
2512
+ background: var(--react-autoql-background-color-primary); }
2591
2513
 
2592
- .react-autoql-table.tabulator
2593
- .tabulator-header
2594
- .tabulator-col:hover
2595
- .tabulator-col-content
2596
- .tabulator-arrow {
2597
- opacity: 1 !important; }
2598
-
2599
- .react-autoql-table.tabulator
2600
- .tabulator-header
2601
- .tabulator-col.tabulator-sortable[aria-sort='desc']
2602
- .tabulator-col-content
2603
- .tabulator-arrow {
2604
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2605
-
2606
- .react-autoql-table.tabulator
2607
- .tabulator-header
2608
- .tabulator-col.tabulator-sortable[aria-sort='asc']
2609
- .tabulator-col-content
2610
- .tabulator-arrow,
2611
- .react-autoql-table.tabulator
2612
- .tabulator-header
2613
- .tabulator-col.tabulator-sortable[aria-sort='none']
2614
- .tabulator-col-content
2615
- .tabulator-arrow {
2616
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2617
-
2618
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2619
- display: unset;
2620
- opacity: 0;
2621
- background-color: transparent;
2622
- width: 7px;
2623
- height: 7px;
2624
- -webkit-transition: all 0.3s ease;
2625
- transition: all 0.3s ease; }
2626
-
2627
- .react-autoql-table.tabulator .tabulator-tableHolder {
2628
- min-height: calc(100% - 40px) !important;
2629
- height: calc(100% - 40px) !important;
2630
- max-height: calc(100% - 40px) !important; }
2631
-
2632
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2633
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2634
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2635
- background-color: transparent; }
2636
-
2637
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2638
- background-color: rgba(0, 0, 0, 0.2);
2639
- border-radius: 7px;
2640
- border: 0px; }
2641
-
2642
- .react-autoql-table .tabulator-header-filter input {
2643
- border: 1px solid var(--react-autoql-border-color);
2644
- border-radius: 4px;
2645
- background: transparent;
2646
- padding: 4px 9px !important;
2647
- outline: none !important; }
2648
-
2649
- .react-autoql-table .tabulator-header-filter input:focus {
2650
- border: 1px solid #28a8e0; }
2651
-
2652
- /* These are necessary because we are always rendering the
2653
- filter (just display: none when not used) instead of re-rendering
2654
- the whole table when the filter button is clicked */
2655
- .react-autoql-table-container:not(.filtering)
2656
- .react-autoql-table
2657
- .tabulator-header-filter {
2658
- display: none; }
2659
-
2660
- .react-autoql-table-container:not(.filtering)
2661
- .react-autoql-table
2662
- .tabulator-col {
2663
- height: auto !important; }
2664
-
2665
- .tabulator-table .tabulator-row .tabulator-cell {
2666
- min-height: 38px; }
2667
-
2668
- /* Center header titles */
2669
- .react-autoql-table .tabulator-header .tabulator-col {
2670
- text-align: center !important; }
2671
-
2672
- .react-autoql-table .tabulator-header .tabulator-col-title {
2673
- padding-left: 10px !important;
2674
- padding-right: 10px !important; }
2675
-
2676
- .filter-tag {
2677
- color: #2ecc40;
2678
- border: 1px solid;
2679
- padding: 2px 4px;
2680
- border-radius: 4px;
2681
- font-weight: 400;
2682
- font-size: 10px;
2683
- margin-right: 5px;
2684
- vertical-align: top;
2685
- line-height: 21px; }
2686
-
2687
- .comparison-value-positive {
2688
- color: #2ecc40; }
2689
-
2690
- .comparison-value-negative {
2691
- color: #e80000; }
2692
-
2693
- .react-autoql-condition-locking-input {
2694
- padding: 5px;
2695
- padding-left: 20px;
2696
- margin: 10px;
2697
- height: 32px;
2698
- box-sizing: border-box;
2699
- border-radius: 24px;
2700
- font-size: 12px;
2701
- font-family: inherit;
2702
- letter-spacing: 0.04em;
2703
- outline: none !important;
2704
- width: calc(100% - 60px);
2705
- font-family: inherit;
2706
- /* Default styles outside of data messenger */
2707
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2708
- background: var(--react-autoql-background-color-primary);
2709
- color: #5d5d5d; }
2710
-
2711
- .condition-table {
2712
- min-width: 95%;
2713
- margin: 10px auto; }
2714
-
2715
- .condition-table thead {
2716
- padding-left: 10px; }
2717
-
2718
- .condition-table th {
2719
- text-align: left;
2720
- padding: 4px;
2721
- margin: 0 10px 0 10px;
2722
- font-weight: 800; }
2723
-
2724
- .react-autoql-accept-conditions-button {
2725
- text-align: right;
2726
- margin-bottom: 12px;
2727
- padding-right: 10px;
2728
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2729
- transition: color 0.1s ease; }
2730
- .react-autoql-accept-conditions-button span {
2731
- opacity: 0.8;
2732
- cursor: pointer; }
2733
- .react-autoql-accept-conditions-button span:hover {
2734
- opacity: 1; }
2735
-
2736
- .condition-table tr {
2737
- cursor: pointer; }
2738
- .condition-table tr:hover {
2739
- background: var(--react-autoql-accent-color);
2740
- color: white; }
2741
-
2742
- .condition-table td {
2743
- text-align: left;
2744
- padding: 4px;
2745
- margin: 0 10px 0 10px;
2746
- padding-left: 10px; }
2747
-
2748
- .condition-list {
2749
- padding: 0;
2750
- margin: 0 auto; }
2751
-
2752
- .condition-list-item {
2753
- cursor: pointer;
2754
- padding: 4px;
2755
- margin: 0 10px 0 10px;
2756
- display: flex;
2757
- justify-content: space-between;
2758
- border-radius: 2px;
2759
- padding-left: 10px; }
2760
- .condition-list-item:hover {
2761
- background: var(--react-autoql-accent-color);
2762
- color: white; }
2763
-
2764
- .empty-condition-list {
2765
- text-align: center;
2766
- padding: 4px;
2767
- margin: 0 20px 0 20px; }
2768
-
2769
- .autoql-close-button {
2770
- background-color: inherit;
2771
- border: none;
2772
- text-align: left;
2773
- font-size: 20px;
2774
- margin-top: -20px;
2775
- float: none !important;
2776
- color: inherit; }
2777
-
2778
- .react-tiny-popover-container {
2779
- background: var(--react-autoql-background-color-primary); }
2780
-
2781
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2782
- flex-grow: 1;
2783
- display: inline;
2784
- width: 90%;
2785
- height: 100%; }
2514
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2515
+ flex-grow: 1;
2516
+ display: inline;
2517
+ width: 90%;
2518
+ height: 100%; }
2786
2519
 
2787
2520
  .autoql-condition-locking-menu-container
2788
2521
  .react-autosuggest__suggestions-container--open {
@@ -2814,35 +2547,435 @@ the whole table when the filter button is clicked */
2814
2547
  .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2815
2548
  color: var(--react-autoql-text-color-primary); }
2816
2549
 
2817
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2818
- opacity: 0.5; }
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%; } }
2793
+
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%; } }
2801
+
2802
+ .ReactModal__Overlay {
2803
+ background-color: transparent !important;
2804
+ transition: background-color 0.2s ease-in-out;
2805
+ z-index: 9999; }
2806
+
2807
+ .ReactModal__Overlay--after-open {
2808
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2809
+
2810
+ .ReactModal__Overlay--before-close {
2811
+ background-color: transparent !important; }
2812
+
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); }
2840
+
2841
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2842
+ transform: scale(1); }
2843
+
2844
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2845
+ transform: scale(0); }
2846
+
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; }
2854
+
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; }
2861
+
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
+
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;
2877
+ cursor: pointer; }
2878
+
2879
+ .react-autoql-modal-close-btn:hover {
2880
+ opacity: 1 !important; }
2881
+
2882
+ .react-autoql-cascader {
2883
+ position: relative;
2884
+ white-space: nowrap;
2885
+ overflow: hidden;
2886
+ min-width: 300px; }
2887
+ .react-autoql-cascader .options-container {
2888
+ transition: max-width 0.3s ease;
2889
+ display: inline-block;
2890
+ vertical-align: top;
2891
+ padding: 0 10px;
2892
+ margin: 10px 0;
2893
+ width: 100%;
2894
+ max-width: calc(100% - 20px);
2895
+ white-space: pre-wrap; }
2896
+ .react-autoql-cascader .options-container.hidden {
2897
+ max-width: 0; }
2898
+ .react-autoql-cascader .options-container.hidden span {
2899
+ white-space: nowrap; }
2900
+ .react-autoql-cascader .options-container.hidden .option {
2901
+ opacity: 0;
2902
+ pointer-events: none; }
2903
+ .react-autoql-cascader .options-container .options-title {
2904
+ padding: 4px;
2905
+ padding-left: 10px;
2906
+ font-weight: 600; }
2907
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2908
+ position: absolute;
2909
+ cursor: pointer;
2910
+ top: 15px;
2911
+ left: 0; }
2912
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2913
+ opacity: 0.8; }
2914
+ .react-autoql-cascader .options-container .option {
2915
+ cursor: pointer;
2916
+ padding: 4px;
2917
+ display: flex;
2918
+ justify-content: space-between;
2919
+ border-radius: 2px;
2920
+ padding-left: 10px; }
2921
+ .react-autoql-cascader .options-container .option .option-arrow {
2922
+ opacity: 0.7; }
2923
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2924
+ opacity: 0;
2925
+ color: #fff;
2926
+ font-size: 16px;
2927
+ vertical-align: middle; }
2928
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2929
+ background-color: var(--react-autoql-accent-color, #26a7df);
2930
+ color: #fff; }
2931
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2932
+ opacity: 1; }
2933
+ .react-autoql-cascader .options-container:not(:last-child) {
2934
+ border-right: 1px solid #d3d3d352; }
2935
+
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; }
2819
2943
 
2820
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2821
- opacity: 0.5; }
2944
+ .react-autoql-btn.disabled {
2945
+ opacity: 0.4;
2946
+ cursor: not-allowed;
2947
+ pointer-events: none; }
2822
2948
 
2823
- .autoql-condition-locking-menu-container input::placeholder {
2824
- opacity: 0.5; }
2949
+ .react-autoql-btn.small {
2950
+ padding: 2px 8px;
2951
+ margin: 2px 3px; }
2825
2952
 
2826
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2827
- margin: 0;
2828
- padding: 0;
2829
- list-style-type: none; }
2953
+ .react-autoql-btn.large {
2954
+ padding: 5px 16px;
2955
+ margin: 2px 5px; }
2830
2956
 
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; }
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); }
2837
2964
 
2838
- .autoql-condition-locking-menu-container
2839
- .react-autosuggest__suggestion--highlighted {
2840
- background-color: rgba(0, 0, 0, 0.1) !important; }
2965
+ .react-autoql-btn.primary {
2966
+ background: var(--react-autoql-accent-color);
2967
+ border: 1px solid var(--react-autoql-accent-color);
2968
+ color: white; }
2969
+ .react-autoql-btn.primary:hover {
2970
+ opacity: 0.8; }
2841
2971
 
2842
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2843
- padding: 10px 0 0 10px;
2844
- font-size: 12px;
2845
- color: #777; }
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; }
2846
2979
 
2847
2980
  .autoql-options-toolbar {
2848
2981
  position: absolute;
@@ -2879,307 +3012,174 @@ the whole table when the filter button is clicked */
2879
3012
  .copy-sql-modal-content:hover .copy-sql-btn {
2880
3013
  opacity: 1; }
2881
3014
 
2882
- .chat-single-message-container {
2883
- transition: background-color 0.2s ease;
2884
- padding-top: 6px; }
2885
- .chat-single-message-container:first-of-type {
2886
- margin-top: 10px; }
2887
- .chat-single-message-container .query-more-btn {
2888
- transition: all 0.3s ease;
2889
- font-size: 22px;
2890
- padding: 13px;
2891
- margin-bottom: 6px;
2892
- height: 42px;
2893
- opacity: 0;
2894
- visibility: hidden;
2895
- cursor: pointer; }
2896
- .chat-single-message-container .query-more-btn:hover {
2897
- opacity: 1; }
2898
-
2899
- .chat-condition-item-container {
2900
- position: absolute;
2901
- background: inherit;
2902
- bottom: 0px;
2903
- padding: 5px;
2904
- border-radius: 6px; }
2905
-
2906
- .chat-condition-item {
2907
- background: none !important;
2908
- border: none;
2909
- margin-top: -20px !important;
2910
- padding: 0 !important;
2911
- font-family: var(--react-autoql-font-family);
2912
- color: var(--react-autoql-accent-color);
2913
- text-decoration: underline;
2914
- cursor: pointer; }
2915
-
2916
- .chat-single-message-container.response {
2917
- display: flex;
2918
- justify-content: flex-start;
2919
- padding-left: 20px;
2920
- -webkit-animation: scale-up-bl 0.6s ease;
2921
- animation: scale-up-bl 0.6s ease; }
2922
-
2923
- .chat-single-message-container.request {
2924
- display: flex;
2925
- justify-content: flex-end;
2926
- padding-right: 20px;
2927
- -webkit-animation: scale-up-br 0.6s ease;
2928
- animation: scale-up-br 0.6s ease; }
2929
-
2930
- .chat-single-message-container .chat-message-bubble {
2931
- position: relative;
2932
- padding: 13px;
2933
- border-radius: 10px;
2934
- max-width: calc(100% - 20px);
2935
- word-wrap: break-word;
2936
- font-family: inherit;
2937
- font-size: 14px;
2938
- letter-spacing: 0.04em;
2939
- box-sizing: border-box;
2940
- /* make small margin on bottom because sometimes react
2941
- custom scrollbar cuts off a pixel or 2 at the bottom */
2942
- margin-bottom: 6px; }
2943
-
2944
- .chat-single-message-container .chat-message-bubble.text {
2945
- max-width: 85%; }
2946
-
2947
- .chat-single-message-container .chat-message-bubble.full-width {
2948
- width: calc(100% - 20px) !important;
2949
- min-width: calc(100% - 20px) !important;
2950
- max-width: calc(100% - 20px) !important; }
2951
-
2952
- .chat-single-message-container.response .chat-message-bubble.active {
2953
- border: 1px solid #c3c3c3; }
2954
-
2955
- .chat-single-message-container.response .chat-message-bubble {
2956
- background: var(--react-autoql-background-color-primary);
2957
- color: var(--react-autoql-text-color-primary);
2958
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2959
-
2960
- .chat-single-message-container.response .chat-message-bubble:not(.text) {
2961
- min-width: 125px; }
2962
-
2963
- .chat-single-message-container.request .chat-message-bubble {
2964
- background: var(--react-autoql-accent-color);
2965
- color: white;
2966
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2967
-
2968
- /* Increase height of message to include table filters,
2969
- so we dont have to redraw the whole table */
2970
- .chat-single-message-container.response.filtering-table {
2971
- max-height: calc(85% + 35px) !important; }
2972
-
2973
- .chat-message-toolbar,
2974
- .chat-message-toolbar.autoql-options-toolbar {
2975
- display: none;
2976
- position: absolute;
2977
- background: inherit;
2978
- top: -31px;
2979
- padding: 5px;
2980
- border-radius: 6px;
2981
- line-height: 28px;
2982
- background: var(--react-autoql-background-color-primary);
2983
- border: 1px solid var(--react-autoql-border-color);
2984
- color: var(--react-autoql-accent-color); }
2985
-
2986
- .chat-message-toolbar.right {
2987
- right: -9px; }
2988
-
2989
- .chat-message-toolbar.left {
2990
- left: -9px; }
3015
+ .react-autoql-table-container {
3016
+ height: 100%;
3017
+ max-width: 100%;
3018
+ background-color: inherit; }
2991
3019
 
2992
- .chat-message-bubble:hover .chat-message-toolbar,
2993
- .chat-message-bubble .chat-message-toolbar.active {
2994
- display: block; }
3020
+ .react-autoql-table {
3021
+ margin-bottom: 0; }
2995
3022
 
2996
- .report-problem-text-area {
2997
- border-radius: 4px;
2998
- border: 1px solid rgba(0, 0, 0, 0.15);
2999
- margin-top: 10px;
3000
- padding: 5px 10px;
3001
- outline: none !important; }
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; }
3002
3031
 
3003
- .data-limit-warning-icon {
3004
- color: var(--react-autoql-warning-color) !important;
3005
- position: absolute !important;
3006
- bottom: 2px;
3007
- right: 4px;
3008
- 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; }
3009
3037
 
3010
- .condition-info-icon-left-align {
3011
- color: var(--react-autoql-accent-color) !important;
3012
- position: absolute !important;
3013
- bottom: 2px;
3014
- right: 10px;
3015
- font-size: 20px; }
3038
+ .react-autoql-table.tabulator
3039
+ .tabulator-header
3040
+ .tabulator-col.tabulator-sortable:hover {
3041
+ background-color: var(--react-autoql-hover-color) !important; }
3016
3042
 
3017
- .condition-info-icon {
3018
- color: var(--react-autoql-accent-color) !important;
3019
- position: absolute !important;
3020
- bottom: 2px;
3021
- right: 4px;
3022
- font-size: 20px; }
3043
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3044
+ .react-autoql-table.tabulator .tabulator-cell {
3045
+ border-color: var(--react-autoql-border-color); }
3023
3046
 
3024
- .more-options-menu,
3025
- .report-problem-menu {
3026
- background: var(--react-autoql-background-color-primary);
3027
- padding: 10px 0; }
3028
- .more-options-menu span.react-autoql-icon svg,
3029
- .report-problem-menu span.react-autoql-icon svg {
3030
- margin-right: 3px; }
3047
+ .react-autoql-table.tabulator .tabulator-header {
3048
+ border-bottom: 2px solid var(--react-autoql-border-color); }
3031
3049
 
3032
- .interpretation-icon {
3033
- vertical-align: top;
3034
- height: 26px;
3035
- margin: 0 3px;
3036
- font-size: 18px; }
3050
+ .react-autoql-table.tabulator {
3051
+ background-color: inherit;
3052
+ height: 100%; }
3037
3053
 
3038
- /* Chart icon styles */
3039
- .chart-icon-svg-0,
3040
- .react-autoql-icon-svg-0 {
3041
- 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); }
3042
3057
 
3043
- .hm0 {
3044
- opacity: 0.5;
3045
- fill: currentColor;
3046
- 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; }
3047
3061
 
3048
- .hm1 {
3049
- fill: currentColor; }
3062
+ .react-autoql-table .tabulator-tableHolder {
3063
+ max-height: calc(100% - 38px) !important;
3064
+ background-color: inherit; }
3050
3065
 
3051
- .hm2 {
3052
- opacity: 0.15;
3053
- fill: currentColor;
3054
- enable-background: new; }
3066
+ .react-autoql-table.tabulator
3067
+ .tabulator-header
3068
+ .tabulator-col
3069
+ .tabulator-col-content {
3070
+ padding: 8px 5px; }
3055
3071
 
3056
- .hm3 {
3057
- opacity: 0.6;
3058
- fill: currentColor;
3059
- enable-background: new; }
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); }
3060
3082
 
3061
- .hm4 {
3062
- opacity: 0.65;
3063
- fill: currentColor;
3064
- enable-background: new; }
3083
+ .react-autoql-table.tabulator
3084
+ .tabulator-header
3085
+ .tabulator-col:hover
3086
+ .tabulator-col-content
3087
+ .tabulator-arrow {
3088
+ opacity: 1 !important; }
3065
3089
 
3066
- .hm5 {
3067
- fill: currentColor; }
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; }
3068
3096
 
3069
- .hm6 {
3070
- fill: currentColor; }
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; }
3071
3108
 
3072
- /* animations */
3073
- @-webkit-keyframes scale-up-br {
3074
- 0% {
3075
- transform: scale(0.5);
3076
- transform-origin: 100% 100%; }
3077
- 100% {
3078
- transform: scale(1);
3079
- transform-origin: 100% 100%; } }
3080
- @keyframes scale-up-br {
3081
- 0% {
3082
- transform: scale(0.5);
3083
- transform-origin: 100% 100%; }
3084
- 100% {
3085
- transform: scale(1);
3086
- transform-origin: 100% 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; }
3087
3117
 
3088
- @-webkit-keyframes scale-up-bl {
3089
- 0% {
3090
- transform: scale(0.5);
3091
- transform-origin: 0% 100%; }
3092
- 100% {
3093
- transform: scale(1);
3094
- transform-origin: 0% 100%; } }
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; }
3095
3122
 
3096
- @keyframes scale-up-bl {
3097
- 0% {
3098
- transform: scale(0.5);
3099
- transform-origin: 0% 100%; }
3100
- 100% {
3101
- transform: scale(1);
3102
- transform-origin: 0% 100%; } }
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;
@@ -3280,36 +3280,57 @@ so we dont have to redraw the whole table */
3280
3280
  background: var(--react-autoql-background-color-primary);
3281
3281
  padding: 5px; }
3282
3282
 
3283
- .viz-toolbar {
3284
- position: absolute;
3285
- background: inherit;
3286
- padding: 5px;
3287
- border-radius: 6px;
3288
- line-height: 28px;
3289
- border: 1px solid #d3d3d352; }
3290
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3291
- display: block; }
3292
-
3293
- .react-autoql-toolbar-btn {
3294
- height: 28px;
3295
- width: 28px;
3296
- background: none;
3297
- border: none;
3298
- font-size: 16px;
3299
- line-height: 28px;
3300
- vertical-align: top;
3301
- color: var(--react-autoql-accent-color);
3302
- cursor: pointer;
3303
- outline: none !important; }
3304
-
3305
- .react-autoql-toolbar-btn.green {
3306
- color: #2ecc40; }
3307
-
3308
- .react-autoql-toolbar-btn.red {
3309
- color: #e80000; }
3310
3283
 
3311
- .react-autoql-toolbar-btn:hover {
3312
- opacity: 0.7; }
3284
+ .react-autoql-input-container {
3285
+ position: relative;
3286
+ margin: 2px 5px;
3287
+ display: inline-block; }
3288
+ .react-autoql-input-container .react-autoql-input {
3289
+ border: 1px solid rgba(0, 0, 0, 0.1);
3290
+ border-radius: 4px;
3291
+ line-height: 32px;
3292
+ min-height: 34px;
3293
+ padding: 0 10px;
3294
+ width: 100%;
3295
+ outline: none !important;
3296
+ transition: all 0.2s ease;
3297
+ transition-property: border-color, color, opacity; }
3298
+ .react-autoql-input-container .react-autoql-input.with-icon {
3299
+ padding-left: 38px; }
3300
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3301
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3302
+ color: rgba(0, 0, 0, 0.2);
3303
+ opacity: 1;
3304
+ /* Firefox */
3305
+ font-style: italic; }
3306
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3307
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3308
+ color: rgba(0, 0, 0, 0.2);
3309
+ opacity: 1;
3310
+ /* Firefox */
3311
+ font-style: italic; }
3312
+ .react-autoql-input-container .react-autoql-input::placeholder {
3313
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3314
+ color: rgba(0, 0, 0, 0.2);
3315
+ opacity: 1;
3316
+ /* Firefox */
3317
+ font-style: italic; }
3318
+ .react-autoql-input-container .react-autoql-input-icon {
3319
+ position: absolute;
3320
+ left: 12px;
3321
+ top: 8px;
3322
+ opacity: 0.4;
3323
+ transition: all 0.2s ease; }
3324
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3325
+ height: 17px;
3326
+ width: 17px; }
3327
+ .react-autoql-input-container:hover .react-autoql-input,
3328
+ .react-autoql-input-container .react-autoql-input:focus {
3329
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3330
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3331
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3332
+ opacity: 1;
3333
+ color: var(--react-autoql-accent-color, #26a7df); }
3313
3334
 
3314
3335
  .react-autoql-radio-btn-container {
3315
3336
  display: inline-block;
@@ -3514,6 +3535,36 @@ so we dont have to redraw the whole table */
3514
3535
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3515
3536
  background: var(--react-autoql-accent-color); }
3516
3537
 
3538
+ .viz-toolbar {
3539
+ position: absolute;
3540
+ background: inherit;
3541
+ padding: 5px;
3542
+ border-radius: 6px;
3543
+ line-height: 28px;
3544
+ border: 1px solid #d3d3d352; }
3545
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3546
+ display: block; }
3547
+
3548
+ .react-autoql-toolbar-btn {
3549
+ height: 28px;
3550
+ width: 28px;
3551
+ background: none;
3552
+ border: none;
3553
+ font-size: 16px;
3554
+ line-height: 28px;
3555
+ vertical-align: top;
3556
+ color: var(--react-autoql-accent-color);
3557
+ cursor: pointer;
3558
+ outline: none !important; }
3559
+
3560
+ .react-autoql-toolbar-btn.green {
3561
+ color: #2ecc40; }
3562
+
3563
+ .react-autoql-toolbar-btn.red {
3564
+ color: #e80000; }
3565
+
3566
+ .react-autoql-toolbar-btn:hover {
3567
+ opacity: 0.7; }
3517
3568
 
3518
3569
  .react-autoql-steps-container {
3519
3570
  margin: 10px; }
@@ -3584,57 +3635,6 @@ so we dont have to redraw the whole table */
3584
3635
  transition-duration: 0.5s;
3585
3636
  opacity: 1; }
3586
3637
 
3587
- .react-autoql-input-container {
3588
- position: relative;
3589
- margin: 2px 5px;
3590
- display: inline-block; }
3591
- .react-autoql-input-container .react-autoql-input {
3592
- border: 1px solid rgba(0, 0, 0, 0.1);
3593
- border-radius: 4px;
3594
- line-height: 32px;
3595
- min-height: 34px;
3596
- padding: 0 10px;
3597
- width: 100%;
3598
- outline: none !important;
3599
- transition: all 0.2s ease;
3600
- transition-property: border-color, color, opacity; }
3601
- .react-autoql-input-container .react-autoql-input.with-icon {
3602
- padding-left: 38px; }
3603
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3604
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3605
- color: rgba(0, 0, 0, 0.2);
3606
- opacity: 1;
3607
- /* Firefox */
3608
- font-style: italic; }
3609
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3610
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3611
- color: rgba(0, 0, 0, 0.2);
3612
- opacity: 1;
3613
- /* Firefox */
3614
- font-style: italic; }
3615
- .react-autoql-input-container .react-autoql-input::placeholder {
3616
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3617
- color: rgba(0, 0, 0, 0.2);
3618
- opacity: 1;
3619
- /* Firefox */
3620
- font-style: italic; }
3621
- .react-autoql-input-container .react-autoql-input-icon {
3622
- position: absolute;
3623
- left: 12px;
3624
- top: 8px;
3625
- opacity: 0.4;
3626
- transition: all 0.2s ease; }
3627
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3628
- height: 17px;
3629
- width: 17px; }
3630
- .react-autoql-input-container:hover .react-autoql-input,
3631
- .react-autoql-input-container .react-autoql-input:focus {
3632
- border-color: var(--react-autoql-accent-color, #26a7df); }
3633
- .react-autoql-input-container:hover .react-autoql-input-icon,
3634
- .react-autoql-input-container .react-autoql-input-icon.focus {
3635
- opacity: 1;
3636
- color: var(--react-autoql-accent-color, #26a7df); }
3637
-
3638
3638
  .react-autoql-notification-rule-container {
3639
3639
  display: flex; }
3640
3640
  .react-autoql-notification-rule-container .react-autoql-rule-input {
@@ -3688,6 +3688,36 @@ so we dont have to redraw the whole table */
3688
3688
  padding: 0 10px;
3689
3689
  color: var(--react-autoql-warning-color); }
3690
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; }
3708
+
3709
+ @-webkit-keyframes spinner-loader {
3710
+ 0% {
3711
+ transform: rotate(0deg); }
3712
+ 100% {
3713
+ transform: rotate(360deg); } }
3714
+
3715
+ @keyframes spinner-loader {
3716
+ 0% {
3717
+ transform: rotate(0deg); }
3718
+ 100% {
3719
+ transform: rotate(360deg); } }
3720
+
3691
3721
  .notification-read-only-group {
3692
3722
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3693
3723
  border-radius: 4px;
@@ -3806,74 +3836,6 @@ so we dont have to redraw the whole table */
3806
3836
  opacity: 1;
3807
3837
  color: var(--react-autoql-accent-color); }
3808
3838
 
3809
- .spinner-loader {
3810
- display: inline-block;
3811
- width: 14px;
3812
- height: 14px;
3813
- margin-right: 6px; }
3814
-
3815
- .spinner-loader:after {
3816
- content: " ";
3817
- display: block;
3818
- width: 16px;
3819
- height: 16px;
3820
- margin: 0px;
3821
- border-radius: 50%;
3822
- border: 1px solid currentColor;
3823
- border-color: currentColor transparent currentColor transparent;
3824
- -webkit-animation: spinner-loader 1.2s linear infinite;
3825
- animation: spinner-loader 1.2s linear infinite; }
3826
-
3827
- @-webkit-keyframes spinner-loader {
3828
- 0% {
3829
- transform: rotate(0deg); }
3830
- 100% {
3831
- transform: rotate(360deg); } }
3832
-
3833
- @keyframes spinner-loader {
3834
- 0% {
3835
- transform: rotate(0deg); }
3836
- 100% {
3837
- transform: rotate(360deg); } }
3838
-
3839
- .react-autoql-select {
3840
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
- border-radius: 4px;
3842
- background: var(--react-autoql-background-color-primary, white);
3843
- display: inline-block;
3844
- font-size: 13px;
3845
- line-height: 32px;
3846
- height: 34px;
3847
- margin: 0 3px;
3848
- padding: 0 11px;
3849
- color: var(--react-autoql-accent-color, #26a7df);
3850
- transition: all 0.2s ease;
3851
- cursor: pointer; }
3852
- .react-autoql-select:hover {
3853
- border-color: var(--react-autoql-accent-color, #26a7df); }
3854
-
3855
- .react-autoql-select-popup-container {
3856
- background: var(--react-autoql-background-color-primary, white);
3857
- padding: 10px 0;
3858
- max-height: 300px;
3859
- overflow-y: auto; }
3860
- .react-autoql-select-popup-container .react-autoql-select-option.active {
3861
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3862
- .react-autoql-select-popup-container .react-autoql-select-popup {
3863
- list-style-type: none;
3864
- width: 100%;
3865
- margin: 0;
3866
- padding: 0; }
3867
- .react-autoql-select-popup-container .react-autoql-select-popup li {
3868
- color: var(--react-autoql-text-color-primary);
3869
- width: 100%;
3870
- height: 35px;
3871
- line-height: 35px;
3872
- padding: 0 20px;
3873
- cursor: pointer; }
3874
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
-
3877
3839
 
3878
3840
  .slack-modal-error-container,
3879
3841
  .slack-modal-empty-list-message {
@@ -4021,6 +3983,44 @@ so we dont have to redraw the whole table */
4021
3983
  width: 200px; }
4022
3984
 
4023
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
+
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;
4026
4026
  display: flex;