react-autoql 3.5.0 → 3.5.3

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,1221 +1,1222 @@
1
- .react-autoql-bar-container {
1
+ .react-autoql-icon {
2
2
  position: relative;
3
- display: flex;
4
- flex-direction: row; }
5
-
6
- .react-autoql-chatbar-input {
7
- padding: 10px;
8
- padding-left: 20px;
9
- margin: 10px;
10
- height: 42px;
11
- width: calc(100% - 20px);
12
- white-space: nowrap;
13
- box-sizing: border-box;
14
- border-radius: 24px;
15
- font-size: 16px;
16
- font-family: inherit;
17
- letter-spacing: 0.04em;
18
- outline: none !important;
19
- width: calc(100% - 20px);
20
- font-family: inherit;
21
- /* Default styles outside of data messenger */
22
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
23
- background: var(--react-autoql-background-color-primary);
24
- color: #5d5d5d; }
25
-
26
- .react-autoql-chatbar-input.left-padding {
27
- padding-left: 54px; }
28
-
29
- .react-autoql-chatbar-input:disabled {
30
- background: rgba(0, 0, 0, 0.03); }
3
+ opacity: 1; }
4
+ .react-autoql-icon.warning {
5
+ color: var(--react-autoql-warning-color) !important; }
6
+ .react-autoql-icon.danger {
7
+ color: var(--react-autoql-danger-color) !important; }
31
8
 
32
- .react-autoql-chatbar-input:not(:disabled):hover {
33
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
9
+ span.react-autoql-icon {
10
+ vertical-align: unset;
11
+ text-align: left;
12
+ margin: 0;
13
+ padding: 0;
14
+ float: none !important;
15
+ color: inherit; }
16
+ span.react-autoql-icon svg {
17
+ float: none !important;
18
+ color: inherit;
19
+ vertical-align: unset;
20
+ text-align: left;
21
+ margin: 0;
22
+ padding: 0;
23
+ opacity: 1;
24
+ height: 1em;
25
+ margin-bottom: -0.1em; }
34
26
 
35
- .react-autoql-chatbar-input::-moz-placeholder {
36
- /* Default color outside of data messenger */
37
- color: #999 !important; }
27
+ .slack-logo {
28
+ display: inline-block;
29
+ height: 100%;
30
+ margin-bottom: 3px; }
31
+ .slack-logo img {
32
+ vertical-align: middle;
33
+ height: 1em;
34
+ width: 1em; }
38
35
 
39
- .react-autoql-chatbar-input:-ms-input-placeholder {
40
- /* Default color outside of data messenger */
41
- color: #999 !important; }
36
+ .react-autoql-badge {
37
+ position: absolute;
38
+ background: var(--react-autoql-warning-color);
39
+ border: 1px solid var(--react-autoql-background-color-primary);
40
+ width: 0.5em;
41
+ height: 0.5em;
42
+ top: -0.1em;
43
+ right: -0.25em;
44
+ border-radius: 50%;
45
+ box-sizing: content-box; }
42
46
 
43
- .react-autoql-chatbar-input::placeholder {
44
- /* Default color outside of data messenger */
45
- color: #999 !important; }
47
+ .loading-container-centered {
48
+ height: 100%;
49
+ width: 100%;
50
+ display: flex;
51
+ flex-direction: column;
52
+ justify-content: center;
53
+ align-items: center; }
46
54
 
47
- /* autosuggest */
48
- .react-autoql-bar-container .react-autosuggest__container,
49
- .react-autoql-chatbar-input-container {
55
+ .response-loading {
56
+ display: inline-block;
50
57
  position: relative;
51
- flex: 1; }
52
-
53
- .react-autoql-bar-container .react-autosuggest__input--focused {
54
- outline: none; }
55
-
56
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
57
- display: none; }
58
-
59
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
60
- display: none; }
58
+ width: 64px;
59
+ height: 64px; }
61
60
 
62
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
61
+ .response-loading div {
63
62
  position: absolute;
64
- top: 45px;
65
- bottom: unset;
66
- margin: 10px;
67
- padding-top: 5px;
68
- padding-bottom: 5px;
69
- display: block;
70
- width: calc(100% - 20px);
71
- height: unset;
72
- border-radius: 24px;
73
- font-family: inherit;
74
- font-size: 15px;
75
- font-weight: normal;
76
- z-index: 2;
77
- overflow: hidden;
78
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
79
- /* Default styles outside of data messenger */
80
- background-color: white;
81
- color: #5d5d5d; }
63
+ top: 27px;
64
+ width: 11px;
65
+ height: 11px;
66
+ border-radius: 50%;
67
+ background: #e2e2e2;
68
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
69
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
82
70
 
83
- .react-autoql-bar-container.autosuggest-top
84
- .react-autosuggest__suggestions-container--open {
85
- top: unset;
86
- bottom: 45px; }
71
+ .response-loading div:nth-child(1) {
72
+ left: 6px;
73
+ -webkit-animation: response-loading1 0.6s infinite;
74
+ animation: response-loading1 0.6s infinite; }
87
75
 
88
- .react-autoql-bar-container.autosuggest-bottom
89
- .react-autosuggest__suggestions-container--open {
90
- top: 45px;
91
- bottom: unset; }
76
+ .response-loading div:nth-child(2) {
77
+ left: 6px;
78
+ -webkit-animation: response-loading2 0.6s infinite;
79
+ animation: response-loading2 0.6s infinite; }
92
80
 
93
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
94
- margin: 0;
95
- padding: 0;
96
- list-style-type: none; }
81
+ .response-loading div:nth-child(3) {
82
+ left: 26px;
83
+ -webkit-animation: response-loading2 0.6s infinite;
84
+ animation: response-loading2 0.6s infinite; }
97
85
 
98
- /* Autocomplete styles */
99
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
100
- background-color: var(--react-autoql-background-color-primary);
101
- border: 1px solid var(--react-autoql-border-color);
102
- color: var(--react-autoql-text-color-primary); }
86
+ .response-loading div:nth-child(4) {
87
+ left: 45px;
88
+ -webkit-animation: response-loading3 0.6s infinite;
89
+ animation: response-loading3 0.6s infinite; }
103
90
 
104
- .react-autoql-bar-container .react-autosuggest__suggestion {
91
+ @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
92
+ .react-autoql-response-content-container:not(.html-content) {
93
+ position: relative;
94
+ display: flex;
95
+ flex-direction: column;
96
+ justify-content: center;
97
+ align-items: center;
98
+ background-color: inherit;
99
+ font-size: 14px;
100
+ height: 100%;
101
+ width: 100%;
102
+ overflow: hidden;
105
103
  color: var(--react-autoql-text-color-primary); }
106
104
 
107
- .react-autoql-chatbar-input {
108
- border: 1px solid var(--react-autoql-border-color);
105
+ .react-autoql-response-content-container.html-content {
106
+ position: relative;
107
+ background-color: inherit;
108
+ text-align: left;
109
+ font-size: 14px;
110
+ height: 95%;
111
+ width: 100%;
112
+ overflow: hidden;
109
113
  color: var(--react-autoql-text-color-primary); }
114
+ .react-autoql-response-content-container.html-content table th {
115
+ border-bottom: 2px solid var(--react-autoql-border-color); }
116
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
117
+ border-bottom: 1px solid var(--react-autoql-border-color); }
118
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
119
+ border-right: 1px solid var(--react-autoql-border-color); }
120
+ .react-autoql-response-content-container.html-content table th,
121
+ .react-autoql-response-content-container.html-content table td {
122
+ padding: 5px 10px; }
123
+ .react-autoql-response-content-container.html-content * {
124
+ font-size: inherit; }
125
+ .react-autoql-response-content-container.html-content sup,
126
+ .react-autoql-response-content-container.html-content sub {
127
+ font-size: 10px; }
128
+ .react-autoql-response-content-container.html-content > *:first-child {
129
+ margin-top: 0 !important; }
130
+ .react-autoql-response-content-container.html-content > *:last-child {
131
+ margin-bottom: 0 !important; }
132
+ .react-autoql-response-content-container.html-content caption {
133
+ display: table-caption;
134
+ text-align: -webkit-center;
135
+ padding-top: unset;
136
+ padding-bottom: unset;
137
+ color: unset;
138
+ text-align: unset;
139
+ caption-side: unset; }
110
140
 
111
- .react-autoql-chatbar-input::-moz-placeholder {
112
- color: var(--react-autoql-text-color-placeholder); }
113
-
114
- .react-autoql-chatbar-input:-ms-input-placeholder {
115
- color: var(--react-autoql-text-color-placeholder); }
141
+ .react-autoql-response-content-container.table {
142
+ max-height: 100vh !important;
143
+ overflow-y: scroll;
144
+ scrollbar-width: none;
145
+ margin-bottom: 0 !important; }
116
146
 
117
- .react-autoql-chatbar-input::placeholder {
118
- color: var(--react-autoql-text-color-placeholder); }
147
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
148
+ width: 0;
149
+ height: 0; }
119
150
 
120
- .react-autoql-bar-container .react-autosuggest__suggestion {
151
+ .react-autoql-suggestion-btn {
152
+ padding: 6px 14px;
153
+ background: transparent;
154
+ font-family: inherit;
155
+ font-size: 12px;
156
+ margin-bottom: 5px;
157
+ outline: none !important;
121
158
  cursor: pointer;
122
- padding: 2px;
123
- padding-left: 18px;
124
159
  letter-spacing: 0.05em;
125
- line-height: 22.5px; }
160
+ transition: all 0.1s ease;
161
+ border: 1px solid rgba(0, 0, 0, 0.15);
162
+ border-radius: 5px;
163
+ color: inherit; }
126
164
 
127
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
128
- background-color: rgba(0, 0, 0, 0.1) !important; }
165
+ .react-autoql-suggestion-btn:hover {
166
+ border-color: transparent;
167
+ color: white;
168
+ background: var(--react-autoql-accent-color); }
129
169
 
130
- .react-autoql-bar-container .react-autosuggest__section-title {
131
- padding: 10px 0 0 10px;
170
+ .react-autoql-help-link-btn {
171
+ padding: 6px 14px;
172
+ background: transparent;
173
+ border-radius: 5px;
174
+ font-family: inherit;
132
175
  font-size: 12px;
133
- color: #777; }
134
-
135
- .input-response-loading-container {
136
- position: absolute;
137
- right: 23px;
138
- top: -2px; }
176
+ margin-top: 5px;
177
+ outline: none !important;
178
+ cursor: pointer;
179
+ letter-spacing: 0.05em;
180
+ transition: all 0.1s ease;
181
+ border-color: #e2e2e26e;
182
+ color: inherit; }
139
183
 
140
- .chat-bar-input-icon {
141
- position: absolute;
142
- color: #28a8e0;
143
- font-size: 20px;
144
- left: 30px;
145
- top: 15px; }
184
+ .react-autoql-help-link-btn:hover {
185
+ opacity: 0.7; }
146
186
 
147
- .react-autoql-drawer {
148
- font-family: var(--react-autoql-font-family), sans-serif;
149
- line-height: 22px; }
187
+ .react-autoql-help-link-icon {
188
+ width: 15px;
189
+ height: 15px;
190
+ margin-bottom: -3px;
191
+ margin-right: 3px; }
150
192
 
151
- .react-autoql-drawer.disable-selection {
152
- -webkit-user-select: none;
153
- -moz-user-select: none;
154
- -ms-user-select: none;
155
- user-select: none; }
193
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
194
+ color: var(--react-autoql-success-color); }
156
195
 
157
- .react-autoql-drawer .react-autoql-drawer-content-container {
158
- width: 100%;
196
+ .react-autoql-suggestion-message {
159
197
  height: 100%;
160
- display: flex;
161
- background: var(--react-autoql-background-color-secondary);
162
- overflow: hidden;
163
- border-radius: 4px;
164
- flex-direction: column;
165
- justify-content: stretch; }
166
-
167
- .react-autoql-drawer .chat-header-container {
168
- display: flex;
169
- justify-content: space-between;
170
198
  width: 100%;
171
- height: 60px;
172
- background: var(--react-autoql-accent-color);
173
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
174
- flex-grow: 0;
175
- flex-shrink: 0;
176
- z-index: 1; }
177
-
178
- .react-autoql-drawer .react-autoql-header-right-container {
179
- display: flex;
180
- justify-content: right;
181
- width: 100px; }
199
+ word-break: break-word; }
182
200
 
183
- .react-autoql-drawer .react-autoql-header-center-container {
201
+ .react-autoql-suggestions-select {
184
202
  position: relative;
185
- color: #fff;
186
- line-height: 60px;
187
- font-size: 18px;
203
+ display: inline-block;
204
+ height: 30px;
205
+ background: none;
206
+ outline: none !important;
207
+ border: 1px solid;
208
+ font-family: inherit;
188
209
  letter-spacing: 0.05em;
189
- font-weight: 600;
190
- overflow: hidden;
191
- text-overflow: ellipsis;
192
- white-space: nowrap; }
193
-
194
- .react-autoql-drawer .header-title {
195
- -webkit-animation: fadeIn 0.3s;
196
- animation: fadeIn 0.3s; }
197
-
198
- .react-autoql-drawer .react-autoql-header-left-container {
199
- width: 100px; }
200
-
201
- .react-autoql-drawer .react-autoql-drawer-header-btn {
202
- line-height: 1em;
203
- font-weight: normal;
204
- float: none;
205
- opacity: 1; }
206
- .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
207
- width: 30px;
208
- height: 30px;
209
- padding-top: 3px; }
210
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
211
- position: absolute;
212
- right: 10px;
213
- -webkit-animation: fadeIn 0.3s;
214
- animation: fadeIn 0.3s; }
215
- .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
216
- width: 28px;
217
- height: 28px;
218
- padding-top: 7px;
219
- box-sizing: border-box; }
220
-
221
- .react-autoql-drawer .chat-message-container {
222
- scroll-behavior: smooth !important;
223
- max-height: calc(100% - 140px);
224
- overflow-y: auto;
225
- overflow-x: hidden;
226
- flex: 1; }
227
- .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
228
- overflow-x: hidden !important;
229
- margin-bottom: 0 !important; }
230
-
231
- .react-autoql-drawer .chat-bar-container {
232
- position: relative;
233
- padding: 10px; }
234
-
235
- .react-autoql-drawer .chat-drawer-chat-bar {
236
- flex-shrink: 0;
237
- flex-grow: 0;
238
- height: 60px;
239
- -webkit-animation: fadeIn 0.3s;
240
- animation: fadeIn 0.3s; }
210
+ color: #28a8e0;
211
+ cursor: pointer;
212
+ font-size: inherit; }
241
213
 
242
- .react-autoql-drawer .watermark {
243
- color: var(--react-autoql-text-color-primary);
214
+ .no-columns-error-message {
215
+ position: absolute;
216
+ height: 100%;
217
+ width: 100%;
218
+ display: flex;
219
+ justify-content: center;
220
+ flex-direction: column;
244
221
  text-align: center;
245
- opacity: 0.2;
246
- top: 6px;
247
- width: calc(100% - 10px);
222
+ padding: 20px;
248
223
  font-size: 13px; }
224
+ .no-columns-error-message .warning-icon {
225
+ font-size: 22px;
226
+ display: block;
227
+ margin-bottom: -13px;
228
+ text-align: center; }
229
+ .no-columns-error-message .eye-icon {
230
+ vertical-align: bottom;
231
+ line-height: 18px; }
249
232
 
250
- .react-autoql-drawer .condition-list-container {
251
- position: absolute;
252
- border: 1px solid var(--react-autoql-text-color-primary);
253
- border-radius: 100rem;
254
- background-color: transparent;
255
- color: var(--react-autoql-text-color-primary);
256
- padding: 0 5px 0 5px;
257
- transition: background-color 250ms ease, box-shadow 250ms ease;
258
- z-index: 9999999;
259
- width: -webkit-fit-content;
260
- width: -moz-fit-content;
261
- width: fit-content;
262
- height: -webkit-fit-content;
263
- height: -moz-fit-content;
264
- height: fit-content; }
233
+ /* query validation */
234
+ .react-autoql-query-validation-selector-container {
235
+ display: inline-block;
236
+ position: relative; }
265
237
 
266
- .condition-list-display {
267
- display: none;
268
- background-color: var(--react-autoql-background-color-primary);
269
- border-radius: 4px;
270
- padding: 5px;
271
- width: -webkit-fit-content;
272
- width: -moz-fit-content;
273
- width: fit-content;
274
- height: -webkit-fit-content;
275
- height: -moz-fit-content;
276
- height: fit-content;
277
- padding: 10px;
278
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
238
+ .react-autoql-select-popup-container.query-validation-select {
239
+ padding: 5px 0;
240
+ letter-spacing: 0.03em;
241
+ font-family: var(--react-autoql-font-family), sans-serif; }
242
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
243
+ height: unset;
244
+ font-size: 14px;
245
+ line-height: 24px;
246
+ padding: 0 15px; }
247
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
248
+ color: #d84830; }
279
249
 
280
- .react-autoql-drawer .react-autoql-drawer:focus {
281
- outline: none; }
250
+ .react-autoql-query-validation-query {
251
+ text-align: center; }
282
252
 
283
- .react-autoql-drawer .chat-header-container button {
284
- background: transparent;
285
- border: none;
286
- color: white;
287
- margin: 10px;
288
- margin-right: 0;
289
- font-size: 20px;
253
+ .react-autoql-query-validation-execute-btn {
254
+ height: 38px;
255
+ background: none;
256
+ border-radius: 4px;
257
+ margin-top: 24px;
258
+ width: 100%;
259
+ color: inherit;
290
260
  cursor: pointer;
291
- outline: none !important; }
261
+ outline: none !important;
262
+ border-color: #e2e2e26e;
263
+ transition: all 0.2s ease; }
292
264
 
293
- .react-autoql-drawer .chat-header-container button:hover {
294
- opacity: 0.7; }
265
+ .react-autoql-query-validation-execute-btn:hover {
266
+ border-color: #28a8e0; }
295
267
 
296
- .react-autoql-drawer .chat-header-container button svg {
297
- width: 35px;
298
- height: 35px; }
268
+ .react-autoql-execute-query-icon {
269
+ font-size: 16px;
270
+ vertical-align: middle !important;
271
+ padding-right: 3px !important; }
272
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
273
+ height: 19px;
274
+ width: 19px;
275
+ margin-top: 3px;
276
+ margin-right: 4px;
277
+ vertical-align: top;
278
+ fill: var(--react-autoql-accent-color); }
299
279
 
300
- .topics-container {
301
- margin: 5px 0; }
280
+ .react-autoql-query-validation-select {
281
+ position: relative;
282
+ display: inline-block;
283
+ height: 2em;
284
+ background: none;
285
+ outline: none !important;
286
+ border: none;
287
+ letter-spacing: 0.05em;
288
+ font-family: inherit;
289
+ font-size: inherit;
290
+ margin: 0;
291
+ padding: 0;
292
+ border-radius: 0;
293
+ border-bottom: 1px dashed;
294
+ color: var(--react-autoql-accent-color); }
302
295
 
303
- .intro-qi-link {
296
+ .react-autoql-query-validation-delete-button {
297
+ position: relative;
304
298
  cursor: pointer;
305
- color: var(--react-autoql-accent-color); }
299
+ margin-bottom: -2px; }
306
300
 
307
- /* custom scrollbar */
308
- .react-autoql-drawer .chat-message-container > div:last-child {
309
- opacity: 0;
310
- transition: opacity 200ms ease; }
311
-
312
- .react-autoql-drawer .chat-message-container:hover > div:last-child {
313
- opacity: 1; }
314
-
315
- /* rc-drawer */
316
- .react-autoql-drawer .drawer-content {
317
- background: white;
318
- border-radius: 4px;
319
- overflow: visible;
320
- opacity: 1;
321
- transition: opacity 0.3s ease; }
301
+ .react-autoql-chart-tooltip {
302
+ font-family: var(--react-autoql-font-family), sans-serif;
303
+ letter-spacing: 0.04em;
304
+ line-height: 22px;
305
+ font-size: 13px;
306
+ padding: 7px 15px;
307
+ transition: all 0.2s ease !important;
308
+ text-align: left !important;
309
+ opacity: 1 !important;
310
+ z-index: 99999 !important;
311
+ /* necessary to show up on top of rc drawer */ }
322
312
 
323
- .react-autoql-drawer.closed .drawer-content {
324
- opacity: 0; }
313
+ .single-value-response {
314
+ color: inherit;
315
+ cursor: unset;
316
+ font-size: 20px; }
317
+ .single-value-response:hover {
318
+ color: inherit; }
325
319
 
326
- .react-autoql-drawer .drawer-handle {
327
- transition: opacity 0.5s ease;
328
- overflow: hidden;
329
- width: 50px;
330
- height: 50px;
331
- border-radius: 50px !important;
332
- font-size: 22px; }
333
- .react-autoql-drawer .drawer-handle.default-logo {
334
- background-color: var(--react-autoql-accent-color, #26a7df);
335
- color: #fff; }
336
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
337
- position: absolute;
338
- vertical-align: top;
339
- top: 11px;
340
- left: 12px; }
341
- .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
342
- position: absolute;
343
- width: 26px;
344
- height: 26px; }
320
+ .single-value-response.with-drilldown:hover {
321
+ color: inherit;
322
+ text-decoration: underline;
323
+ font-weight: 600;
324
+ cursor: pointer; }
345
325
 
346
- .react-autoql-drawer.drawer-right .drawer-handle {
347
- left: -70px !important; }
326
+ .react-autoql-query-validation-container {
327
+ width: 100%; }
348
328
 
349
- .react-autoql-drawer.drawer-left .drawer-handle {
350
- right: -60px !important; }
329
+ .react-autoql-query-validation-description {
330
+ margin-bottom: 14px; }
351
331
 
352
- .react-autoql-drawer.drawer-top .drawer-handle {
353
- bottom: -60px !important; }
332
+ .context-menu {
333
+ background: var(--react-autoql-background-color-primary);
334
+ /* height: 100px; */
335
+ width: 150px;
336
+ padding: 10px 0; }
354
337
 
355
- .react-autoql-drawer.drawer-bottom .drawer-handle {
356
- top: -60px !important; }
338
+ .context-menu-list {
339
+ list-style-type: none;
340
+ width: 100%;
341
+ margin: 0;
342
+ padding: 0; }
357
343
 
358
- .react-autoql-drawer .drawer-handle.hide {
359
- opacity: 0;
360
- visibility: hidden; }
344
+ .context-menu-list li {
345
+ color: var(--react-autoql-text-color-primary);
346
+ width: 100%;
347
+ height: 35px;
348
+ line-height: 35px;
349
+ padding: 0 20px;
350
+ cursor: pointer; }
361
351
 
362
- .react-autoql-drawer .drawer-handle-icon,
363
- .react-autoql-drawer .drawer-handle-icon::before,
364
- .react-autoql-drawer .drawer-handle-icon::after {
365
- background: var(--react-autoql-text-color-primary); }
352
+ .context-menu-list li:hover {
353
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
366
354
 
367
- .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
368
- .react-autoql-drawer .drawer-top .drawer-content-wrapper {
369
- left: 0; }
355
+ .react-autoql-condition-link {
356
+ background: none !important;
357
+ border: none;
358
+ padding: 0 !important;
359
+ text-decoration: none;
360
+ white-space: nowrap;
361
+ cursor: pointer;
362
+ color: var(--react-autoql-accent-color) !important; }
363
+ .react-autoql-condition-link:hover {
364
+ opacity: 0.9; }
370
365
 
371
- .react-autoql-drawer .drawer-content-wrapper {
372
- background: transparent; }
366
+ .react-autoql-condition-link-filtered {
367
+ text-decoration: none;
368
+ white-space: nowrap;
369
+ cursor: pointer;
370
+ color: var(--react-autoql-accent-color) !important; }
371
+ .react-autoql-condition-link-filtered .react-autoql-custom-icon {
372
+ font-size: 14px;
373
+ vertical-align: middle;
374
+ margin-top: -4px; }
375
+ .react-autoql-condition-link-filtered:hover {
376
+ opacity: 0.9;
377
+ border: none !important; }
378
+ .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
379
+ opacity: 0.9; }
373
380
 
374
- .react-autoql-drawer.drawer-right .drawer-content-wrapper,
375
- .react-autoql-drawer.drawer-left .drawer-content-wrapper {
376
- max-width: calc(100vw - 45px) !important;
377
- min-width: 400px !important; }
381
+ .react-autoql-condition-lock-reverse-translation {
382
+ color: var(--react-autoql-text-color-primary);
383
+ background-color: var(--react-autoql-background-color-secondary);
384
+ border-radius: 5px;
385
+ padding: 4px 6px 4px 6px;
386
+ margin: 2px;
387
+ min-height: 26px;
388
+ min-width: 300px; }
378
389
 
379
- .react-autoql-drawer.drawer-top .drawer-content-wrapper,
380
- .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
381
- max-height: calc(100vh - 45px) !important;
382
- min-height: 400px !important; }
390
+ .chat-voice-record-button {
391
+ width: 40px;
392
+ height: 40px;
393
+ border-radius: 24px;
394
+ margin: 10px;
395
+ margin-left: 0;
396
+ font-size: 18px;
397
+ line-height: 24px;
398
+ outline: none !important;
399
+ position: relative;
400
+ cursor: pointer;
401
+ overflow: hidden;
402
+ background: var(--react-autoql-accent-color);
403
+ color: white;
404
+ border: none;
405
+ flex-shrink: 0;
406
+ flex-grow: 0; }
383
407
 
384
- .react-autoql-drawer-resize-handle {
385
- position: absolute;
386
- background: transparent; }
387
- .react-autoql-drawer-resize-handle.right {
388
- top: 0;
389
- left: -5px;
390
- width: 5px;
391
- height: 100vh;
392
- cursor: ew-resize; }
393
- .react-autoql-drawer-resize-handle.left {
394
- top: 0;
395
- right: -5px;
396
- width: 5px;
397
- height: 100vh;
398
- cursor: ew-resize; }
399
- .react-autoql-drawer-resize-handle.top {
400
- bottom: -5px;
401
- left: 0;
402
- height: 5px;
403
- width: 100vw;
404
- cursor: ns-resize; }
405
- .react-autoql-drawer-resize-handle.bottom {
406
- top: -5px;
407
- left: 0;
408
- height: 5px;
409
- width: 100vw;
410
- cursor: ns-resize; }
408
+ .chat-voice-record-button:hover {
409
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
411
410
 
412
- .react-autoql-drawer .response-loading-container {
413
- position: absolute;
414
- bottom: 45px;
415
- left: 20px; }
411
+ .chat-voice-record-button.listening {
412
+ background: #ff471a; }
416
413
 
417
- /* Tooltips */
418
- .react-autoql-drawer-tooltip {
419
- font-family: var(--react-autoql-font-family), sans-serif;
420
- letter-spacing: 0.04em;
421
- line-height: 0.9em;
422
- padding: 7px 15px;
423
- transition: none;
424
- opacity: 1 !important;
425
- z-index: 99999 !important;
426
- /* necessary to show up on top of rc drawer */ }
414
+ .chat-voice-record-icon {
415
+ vertical-align: top; }
427
416
 
428
- .interpretation-tooltip {
429
- font-family: var(--react-autoql-font-family), sans-serif;
430
- font-size: 12px;
431
- text-align: left;
417
+ .react-autoql-tooltip {
418
+ font-family: inherit;
432
419
  letter-spacing: 0.04em;
433
420
  padding: 7px 15px;
434
- max-width: 400px;
435
421
  opacity: 1 !important;
436
- transition: none;
437
- z-index: 99999 !important;
438
- /* necessary to show up on top of rc drawer */ }
439
-
440
- .react-autoql-condition-lock-menu {
441
- color: var(--react-autoql-text-color-primary);
442
- background: var(--react-autoql-background-color-primary);
443
- min-height: 300px; }
444
-
445
- .react-tiny-popover-container {
446
- z-index: 9999;
447
- border: 1px solid #ababab52;
448
- border-radius: 4px;
449
- box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
450
- transition: opacity 0.2s ease 0s !important; }
422
+ z-index: 99999 !important; }
451
423
 
452
- .clear-messages-confirm-popover {
453
- color: var(--react-autoql-text-color-primary);
454
- background: var(--react-autoql-background-color-primary);
455
- text-align: right;
456
- padding: 18px;
457
- width: 266px; }
424
+ @-webkit-keyframes slide {
425
+ 0% {
426
+ transform: translateX(-100%); }
427
+ 100% {
428
+ transform: translateX(100%); } }
458
429
 
459
- .react-autoql-confirm-text {
460
- text-align: center; }
430
+ @keyframes slide {
431
+ 0% {
432
+ transform: translateX(-100%); }
433
+ 100% {
434
+ transform: translateX(100%); } }
461
435
 
462
- .react-autoql-menu-text {
463
- text-align: center; }
464
- .react-autoql-menu-text:hover {
465
- color: var(--react-autoql-accent-color);
466
- cursor: pointer; }
436
+ @-webkit-keyframes move {
437
+ 0% {
438
+ left: 0;
439
+ opacity: 0; }
440
+ 5% {
441
+ opacity: 0; }
442
+ 48% {
443
+ opacity: 0.2; }
444
+ 80% {
445
+ opacity: 0; }
446
+ 100% {
447
+ left: 82%; } }
467
448
 
468
- .react-autoql-confirm-icon {
469
- color: #faad14 !important;
470
- vertical-align: middle;
471
- margin-right: 5px !important;
472
- margin-bottom: 3px; }
473
-
474
- .data-messenger-tab-container {
475
- position: absolute;
476
- background: transparent;
477
- display: flex;
478
- justify-content: center;
479
- align-items: center;
480
- pointer-events: none; }
481
- .data-messenger-tab-container.right {
482
- height: 100vh;
483
- width: 60px;
484
- left: -60px; }
485
- .data-messenger-tab-container.left {
486
- height: 100vh;
487
- width: 60px;
488
- right: -60px; }
489
- .data-messenger-tab-container.top {
490
- width: 100vw;
491
- height: 60px;
492
- bottom: -60px; }
493
- .data-messenger-tab-container.bottom {
494
- width: 100vw;
495
- height: 60px;
496
- top: -60px; }
449
+ @keyframes move {
450
+ 0% {
451
+ left: 0;
452
+ opacity: 0; }
453
+ 5% {
454
+ opacity: 0; }
455
+ 48% {
456
+ opacity: 0.2; }
457
+ 80% {
458
+ opacity: 0; }
459
+ 100% {
460
+ left: 82%; } }
497
461
 
498
- /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
499
- .page-switcher-shadow-container {
500
- position: absolute;
501
- background: transparent;
462
+ .react-autoql-dashboard-container {
463
+ background: var(--react-autoql-background-color-secondary);
464
+ height: 100%;
465
+ width: 100%;
502
466
  overflow: hidden; }
503
467
 
504
- .page-switcher-shadow-container.right {
505
- top: 80px;
506
- width: 60px; }
468
+ .react-autoql-dashboard-container.edit-mode {
469
+ padding-bottom: 200px; }
507
470
 
508
- .page-switcher-shadow-container.left {
509
- top: 80px;
510
- width: 60px; }
471
+ .dashboard-drilldown-modal .ReactModal__Content {
472
+ top: unset !important;
473
+ margin-top: 20px !important;
474
+ max-height: 93vh !important; }
511
475
 
512
- /* Container holding the tabs */
513
- .page-switcher-container {
514
- box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
515
- overflow: hidden;
516
- box-sizing: border-box;
517
- display: flex;
518
- pointer-events: all; }
519
- .page-switcher-container .tab {
520
- position: relative;
521
- z-index: 1;
522
- background: var(--react-autoql-accent-color);
523
- color: #fff;
524
- opacity: 1;
525
- font-size: 22px;
526
- text-align: center;
527
- transform: translate(0, 0);
528
- cursor: pointer;
529
- transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
530
- transition-duration: 0.2s; }
531
- .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
532
- height: 22px;
533
- width: 23px; }
534
- .page-switcher-container.right {
535
- border-top-left-radius: 5px;
536
- border-bottom-left-radius: 5px;
537
- margin-top: 20px;
538
- margin-left: 20px;
539
- margin-bottom: 20px;
540
- flex-direction: column; }
541
- .page-switcher-container.right .tab {
542
- box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
543
- .page-switcher-container.left {
544
- border-top-right-radius: 5px;
545
- border-bottom-right-radius: 5px;
546
- margin-top: 20px;
547
- margin-right: 20px;
548
- margin-bottom: 20px;
549
- margin-left: -5px;
550
- flex-direction: column; }
551
- .page-switcher-container.left .tab {
552
- box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
553
- .page-switcher-container.top {
554
- border-bottom-right-radius: 5px;
555
- border-bottom-left-radius: 5px;
556
- margin-right: 20px;
557
- margin-left: 20px;
558
- margin-bottom: 20px;
559
- flex-direction: row;
560
- height: 40px; }
561
- .page-switcher-container.top .tab {
562
- box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
563
- .page-switcher-container.bottom {
564
- border-top-left-radius: 5px;
565
- border-top-right-radius: 5px;
566
- margin-top: 20px;
567
- margin-left: 20px;
568
- margin-right: 20px;
569
- flex-direction: row;
570
- height: 40px; }
571
- .page-switcher-container.bottom .tab {
572
- box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
476
+ .dashboard-drilldown-modal .react-autoql-modal-body {
477
+ padding: 0; }
573
478
 
574
- /* Individual Tabs */
575
- .page-switcher-container .tab {
576
- display: flex;
577
- justify-content: center;
578
- align-items: center; }
479
+ .dashboard-drilldown-modal .react-autoql-table {
480
+ opacity: 0.9;
481
+ font-size: 11px; }
579
482
 
580
- .data-messenger-notification-btn {
581
- display: flex;
582
- flex-direction: column;
583
- justify-content: flex-start;
584
- line-height: inherit; }
483
+ .dashboard-drilldown-modal .splitter-layout {
484
+ height: calc(100% - 55px); }
585
485
 
586
- .page-switcher-container.right .tab,
587
- .page-switcher-container.left .tab {
588
- height: 65px; }
486
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
487
+ padding: 20px;
488
+ padding-bottom: 10px; }
589
489
 
590
- .page-switcher-container.top .tab,
591
- .page-switcher-container.bottom .tab {
592
- width: 65px; }
490
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
491
+ text-align: right;
492
+ width: 100%;
493
+ padding-right: 20px; }
494
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
495
+ position: absolute;
496
+ bottom: 5px;
497
+ width: 100px;
498
+ right: 0; }
499
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
500
+ padding-top: 10px;
501
+ margin-bottom: -8px; }
593
502
 
594
- .page-switcher-container.bottom .tab {
595
- background: var(--react-autoql-background-color-secondary);
596
- color: var(--react-autoql-text-color-primary); }
503
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
504
+ padding: 20px;
505
+ padding-top: 10px;
506
+ overflow: hidden;
507
+ height: 100%; }
597
508
 
598
- .page-switcher-container .tab.active {
599
- background: var(--react-autoql-background-color-secondary);
509
+ .empty-dashboard-message-container {
510
+ font-family: var(--react-autoql-font-family);
600
511
  color: var(--react-autoql-text-color-primary);
601
- box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
512
+ letter-spacing: 0.02em;
513
+ text-align: center;
514
+ padding: 100px;
515
+ height: 100%;
516
+ width: 100%; }
517
+
518
+ .empty-dashboard-new-tile-btn {
519
+ color: var(--react-autoql-accent-color);
602
520
  font-weight: bold;
521
+ cursor: pointer; }
522
+
523
+ .react-autoql-bar-container {
603
524
  position: relative;
604
- z-index: 2; }
525
+ display: flex;
526
+ flex-direction: row; }
605
527
 
606
- .page-switcher-container.bottom .tab.active {
607
- background: var(--react-autoql-accent-color);
608
- color: #fff;
609
- font-weight: bold; }
528
+ .react-autoql-chatbar-input {
529
+ padding: 10px;
530
+ padding-left: 20px;
531
+ margin: 10px;
532
+ height: 42px;
533
+ width: calc(100% - 20px);
534
+ white-space: nowrap;
535
+ box-sizing: border-box;
536
+ border-radius: 24px;
537
+ font-size: 16px;
538
+ font-family: inherit;
539
+ letter-spacing: 0.04em;
540
+ outline: none !important;
541
+ width: calc(100% - 20px);
542
+ font-family: inherit;
543
+ /* Default styles outside of data messenger */
544
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
545
+ background: var(--react-autoql-background-color-primary);
546
+ color: #5d5d5d; }
610
547
 
611
- /* animations */
612
- @-webkit-keyframes response-loading1 {
613
- 0% {
614
- transform: scale(0); }
615
- 100% {
616
- transform: scale(1); } }
617
- @keyframes response-loading1 {
618
- 0% {
619
- transform: scale(0); }
620
- 100% {
621
- transform: scale(1); } }
548
+ .react-autoql-chatbar-input.left-padding {
549
+ padding-left: 54px; }
622
550
 
623
- @-webkit-keyframes response-loading3 {
624
- 0% {
625
- transform: scale(1); }
626
- 100% {
627
- transform: scale(0); } }
551
+ .react-autoql-chatbar-input:disabled {
552
+ background: rgba(0, 0, 0, 0.03); }
628
553
 
629
- @keyframes response-loading3 {
630
- 0% {
631
- transform: scale(1); }
632
- 100% {
633
- transform: scale(0); } }
554
+ .react-autoql-chatbar-input:not(:disabled):hover {
555
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
634
556
 
635
- @-webkit-keyframes response-loading2 {
636
- 0% {
637
- transform: translate(0, 0); }
638
- 100% {
639
- transform: translate(19px, 0); } }
557
+ .react-autoql-chatbar-input::-moz-placeholder {
558
+ /* Default color outside of data messenger */
559
+ color: #999 !important; }
640
560
 
641
- @keyframes response-loading2 {
642
- 0% {
643
- transform: translate(0, 0); }
644
- 100% {
645
- transform: translate(19px, 0); } }
561
+ .react-autoql-chatbar-input:-ms-input-placeholder {
562
+ /* Default color outside of data messenger */
563
+ color: #999 !important; }
646
564
 
647
- @-webkit-keyframes scale-up-center {
648
- 0% {
649
- transform: scale(0); }
650
- 100% {
651
- transform: scale(1); } }
652
-
653
- @keyframes scale-up-center {
654
- 0% {
655
- transform: scale(0); }
656
- 100% {
657
- transform: scale(1); } }
658
-
659
- @-webkit-keyframes fadeIn {
660
- 0% {
661
- opacity: 0; }
662
- 100% {
663
- opacity: 1; } }
664
-
665
- @keyframes fadeIn {
666
- 0% {
667
- opacity: 0; }
668
- 100% {
669
- opacity: 1; } }
565
+ .react-autoql-chatbar-input::placeholder {
566
+ /* Default color outside of data messenger */
567
+ color: #999 !important; }
670
568
 
671
- @-webkit-keyframes slideDown {
672
- 0% {
673
- transform: translateY(-100%); }
674
- 100% {
675
- transform: translateY(0%); } }
569
+ /* autosuggest */
570
+ .react-autoql-bar-container .react-autosuggest__container,
571
+ .react-autoql-chatbar-input-container {
572
+ position: relative;
573
+ flex: 1; }
676
574
 
677
- @keyframes slideDown {
678
- 0% {
679
- transform: translateY(-100%); }
680
- 100% {
681
- transform: translateY(0%); } }
575
+ .react-autoql-bar-container .react-autosuggest__input--focused {
576
+ outline: none; }
682
577
 
683
- @-webkit-keyframes snackbarFadeout {
684
- from {
685
- top: 60px;
686
- opacity: 1; }
687
- to {
688
- top: 30px;
689
- opacity: 0; } }
578
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
579
+ display: none; }
690
580
 
691
- @keyframes snackbarFadeout {
692
- from {
693
- top: 60px;
694
- opacity: 1; }
695
- to {
696
- top: 30px;
697
- opacity: 0; } }
581
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
582
+ display: none; }
698
583
 
699
- .chat-voice-record-button {
700
- width: 40px;
701
- height: 40px;
702
- border-radius: 24px;
584
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
585
+ position: absolute;
586
+ top: 45px;
587
+ bottom: unset;
703
588
  margin: 10px;
704
- margin-left: 0;
705
- font-size: 18px;
706
- line-height: 24px;
707
- outline: none !important;
708
- position: relative;
709
- cursor: pointer;
589
+ padding-top: 5px;
590
+ padding-bottom: 5px;
591
+ display: block;
592
+ width: calc(100% - 20px);
593
+ height: unset;
594
+ border-radius: 24px;
595
+ font-family: inherit;
596
+ font-size: 15px;
597
+ font-weight: normal;
598
+ z-index: 2;
710
599
  overflow: hidden;
711
- background: var(--react-autoql-accent-color);
712
- color: white;
713
- border: none;
714
- flex-shrink: 0;
715
- flex-grow: 0; }
716
-
717
- .chat-voice-record-button:hover {
718
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
719
-
720
- .chat-voice-record-button.listening {
721
- background: #ff471a; }
722
-
723
- .chat-voice-record-icon {
724
- vertical-align: top; }
600
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
601
+ /* Default styles outside of data messenger */
602
+ background-color: white;
603
+ color: #5d5d5d; }
725
604
 
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; }
605
+ .react-autoql-bar-container.autosuggest-top
606
+ .react-autosuggest__suggestions-container--open {
607
+ top: unset;
608
+ bottom: 45px; }
732
609
 
733
- @-webkit-keyframes slide {
734
- 0% {
735
- transform: translateX(-100%); }
736
- 100% {
737
- transform: translateX(100%); } }
610
+ .react-autoql-bar-container.autosuggest-bottom
611
+ .react-autosuggest__suggestions-container--open {
612
+ top: 45px;
613
+ bottom: unset; }
738
614
 
739
- @keyframes slide {
740
- 0% {
741
- transform: translateX(-100%); }
742
- 100% {
743
- transform: translateX(100%); } }
615
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
616
+ margin: 0;
617
+ padding: 0;
618
+ list-style-type: none; }
744
619
 
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%; } }
620
+ /* Autocomplete styles */
621
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
622
+ background-color: var(--react-autoql-background-color-primary);
623
+ border: 1px solid var(--react-autoql-border-color);
624
+ color: var(--react-autoql-text-color-primary); }
757
625
 
758
- @keyframes move {
759
- 0% {
760
- left: 0;
761
- opacity: 0; }
762
- 5% {
763
- opacity: 0; }
764
- 48% {
765
- opacity: 0.2; }
766
- 80% {
767
- opacity: 0; }
768
- 100% {
769
- left: 82%; } }
626
+ .react-autoql-bar-container .react-autosuggest__suggestion {
627
+ color: var(--react-autoql-text-color-primary); }
770
628
 
771
- .react-autoql-dashboard-container {
772
- background: var(--react-autoql-background-color-secondary);
773
- height: 100%;
774
- width: 100%;
775
- overflow: hidden; }
629
+ .react-autoql-chatbar-input {
630
+ border: 1px solid var(--react-autoql-border-color);
631
+ color: var(--react-autoql-text-color-primary); }
776
632
 
777
- .react-autoql-dashboard-container.edit-mode {
778
- padding-bottom: 200px; }
633
+ .react-autoql-chatbar-input::-moz-placeholder {
634
+ color: var(--react-autoql-text-color-placeholder); }
779
635
 
780
- .dashboard-drilldown-modal .ReactModal__Content {
781
- top: unset !important;
782
- margin-top: 20px !important;
783
- max-height: 93vh !important; }
636
+ .react-autoql-chatbar-input:-ms-input-placeholder {
637
+ color: var(--react-autoql-text-color-placeholder); }
784
638
 
785
- .dashboard-drilldown-modal .react-autoql-modal-body {
786
- padding: 0; }
639
+ .react-autoql-chatbar-input::placeholder {
640
+ color: var(--react-autoql-text-color-placeholder); }
787
641
 
788
- .dashboard-drilldown-modal .react-autoql-table {
789
- opacity: 0.9;
790
- font-size: 11px; }
642
+ .react-autoql-bar-container .react-autosuggest__suggestion {
643
+ cursor: pointer;
644
+ padding: 2px;
645
+ padding-left: 18px;
646
+ letter-spacing: 0.05em;
647
+ line-height: 22.5px; }
791
648
 
792
- .dashboard-drilldown-modal .splitter-layout {
793
- height: calc(100% - 55px); }
649
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
650
+ background-color: rgba(0, 0, 0, 0.1) !important; }
794
651
 
795
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
796
- padding: 20px;
797
- padding-bottom: 10px; }
652
+ .react-autoql-bar-container .react-autosuggest__section-title {
653
+ padding: 10px 0 0 10px;
654
+ font-size: 12px;
655
+ color: #777; }
798
656
 
799
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
800
- text-align: right;
801
- width: 100%;
802
- padding-right: 20px; }
803
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
804
- position: absolute;
805
- bottom: 5px;
806
- width: 100px;
807
- right: 0; }
808
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
809
- padding-top: 10px;
810
- margin-bottom: -8px; }
657
+ .input-response-loading-container {
658
+ position: absolute;
659
+ right: 23px;
660
+ top: -2px; }
811
661
 
812
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
813
- padding: 20px;
814
- padding-top: 10px;
815
- overflow: hidden;
816
- height: 100%; }
662
+ .chat-bar-input-icon {
663
+ position: absolute;
664
+ color: #28a8e0;
665
+ font-size: 20px;
666
+ left: 30px;
667
+ top: 15px; }
817
668
 
818
- .empty-dashboard-message-container {
819
- font-family: var(--react-autoql-font-family);
820
- color: var(--react-autoql-text-color-primary);
821
- letter-spacing: 0.02em;
822
- text-align: center;
823
- padding: 100px;
824
- height: 100%;
825
- width: 100%; }
669
+ .react-autoql-drawer {
670
+ font-family: var(--react-autoql-font-family), sans-serif;
671
+ line-height: 22px; }
826
672
 
827
- .empty-dashboard-new-tile-btn {
828
- color: var(--react-autoql-accent-color);
829
- font-weight: bold;
830
- cursor: pointer; }
673
+ .react-autoql-drawer.disable-selection {
674
+ -webkit-user-select: none;
675
+ -moz-user-select: none;
676
+ -ms-user-select: none;
677
+ user-select: none; }
831
678
 
832
- .loading-container-centered {
833
- height: 100%;
679
+ .react-autoql-drawer .react-autoql-drawer-content-container {
834
680
  width: 100%;
681
+ height: 100%;
835
682
  display: flex;
683
+ background: var(--react-autoql-background-color-secondary);
684
+ overflow: hidden;
685
+ border-radius: 4px;
836
686
  flex-direction: column;
837
- justify-content: center;
838
- align-items: center; }
839
-
840
- .response-loading {
841
- display: inline-block;
842
- position: relative;
843
- width: 64px;
844
- height: 64px; }
687
+ justify-content: stretch; }
845
688
 
846
- .response-loading div {
847
- position: absolute;
848
- top: 27px;
849
- width: 11px;
850
- height: 11px;
851
- border-radius: 50%;
852
- background: #e2e2e2;
853
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
854
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
689
+ .react-autoql-drawer .chat-header-container {
690
+ display: flex;
691
+ justify-content: space-between;
692
+ width: 100%;
693
+ height: 60px;
694
+ background: var(--react-autoql-accent-color);
695
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
696
+ flex-grow: 0;
697
+ flex-shrink: 0;
698
+ z-index: 1; }
855
699
 
856
- .response-loading div:nth-child(1) {
857
- left: 6px;
858
- -webkit-animation: response-loading1 0.6s infinite;
859
- animation: response-loading1 0.6s infinite; }
700
+ .react-autoql-drawer .react-autoql-header-right-container {
701
+ display: flex;
702
+ justify-content: right;
703
+ width: 100px; }
860
704
 
861
- .response-loading div:nth-child(2) {
862
- left: 6px;
863
- -webkit-animation: response-loading2 0.6s infinite;
864
- animation: response-loading2 0.6s infinite; }
705
+ .react-autoql-drawer .react-autoql-header-center-container {
706
+ position: relative;
707
+ color: #fff;
708
+ line-height: 60px;
709
+ font-size: 18px;
710
+ letter-spacing: 0.05em;
711
+ font-weight: 600;
712
+ overflow: hidden;
713
+ text-overflow: ellipsis;
714
+ white-space: nowrap; }
865
715
 
866
- .response-loading div:nth-child(3) {
867
- left: 26px;
868
- -webkit-animation: response-loading2 0.6s infinite;
869
- animation: response-loading2 0.6s infinite; }
716
+ .react-autoql-drawer .header-title {
717
+ -webkit-animation: fadeIn 0.3s;
718
+ animation: fadeIn 0.3s; }
870
719
 
871
- .response-loading div:nth-child(4) {
872
- left: 45px;
873
- -webkit-animation: response-loading3 0.6s infinite;
874
- animation: response-loading3 0.6s infinite; }
720
+ .react-autoql-drawer .react-autoql-header-left-container {
721
+ width: 100px; }
875
722
 
876
- .react-autoql-icon {
877
- position: relative;
723
+ .react-autoql-drawer .react-autoql-drawer-header-btn {
724
+ line-height: 1em;
725
+ font-weight: normal;
726
+ float: none;
878
727
  opacity: 1; }
879
- .react-autoql-icon.warning {
880
- color: var(--react-autoql-warning-color) !important; }
881
- .react-autoql-icon.danger {
882
- color: var(--react-autoql-danger-color) !important; }
728
+ .react-autoql-drawer .react-autoql-drawer-header-btn.close span.react-autoql-icon svg {
729
+ width: 30px;
730
+ height: 30px;
731
+ padding-top: 3px; }
732
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all {
733
+ position: absolute;
734
+ right: 10px;
735
+ -webkit-animation: fadeIn 0.3s;
736
+ animation: fadeIn 0.3s; }
737
+ .react-autoql-drawer .react-autoql-drawer-header-btn.clear-all span.react-autoql-icon svg {
738
+ width: 28px;
739
+ height: 28px;
740
+ padding-top: 7px;
741
+ box-sizing: border-box; }
883
742
 
884
- span.react-autoql-icon {
885
- vertical-align: unset;
886
- text-align: left;
887
- margin: 0;
888
- padding: 0;
889
- float: none !important;
890
- color: inherit; }
891
- span.react-autoql-icon svg {
892
- float: none !important;
893
- color: inherit;
894
- vertical-align: unset;
895
- text-align: left;
896
- margin: 0;
897
- padding: 0;
898
- opacity: 1;
899
- height: 1em;
900
- margin-bottom: -0.1em; }
743
+ .react-autoql-drawer .chat-message-container {
744
+ scroll-behavior: smooth !important;
745
+ max-height: calc(100% - 140px);
746
+ overflow-y: auto;
747
+ overflow-x: hidden;
748
+ flex: 1; }
749
+ .react-autoql-drawer .chat-message-container .custom-scrollbar-container {
750
+ overflow-x: hidden !important;
751
+ margin-bottom: 0 !important; }
901
752
 
902
- .slack-logo {
903
- display: inline-block;
904
- height: 100%;
905
- margin-bottom: 3px; }
906
- .slack-logo img {
907
- vertical-align: middle;
908
- height: 1em;
909
- width: 1em; }
753
+ .react-autoql-drawer .chat-bar-container {
754
+ position: relative;
755
+ padding: 10px; }
910
756
 
911
- .react-autoql-badge {
912
- position: absolute;
913
- background: var(--react-autoql-warning-color);
914
- border: 1px solid var(--react-autoql-background-color-primary);
915
- width: 0.5em;
916
- height: 0.5em;
917
- top: -0.1em;
918
- right: -0.25em;
919
- border-radius: 50%;
920
- box-sizing: content-box; }
757
+ .react-autoql-drawer .chat-drawer-chat-bar {
758
+ flex-shrink: 0;
759
+ flex-grow: 0;
760
+ height: 60px;
761
+ -webkit-animation: fadeIn 0.3s;
762
+ animation: fadeIn 0.3s; }
921
763
 
922
- @import url("https://fonts.googleapis.com/icon?family=Material+Icons");
923
- .react-autoql-response-content-container:not(.html-content) {
924
- position: relative;
925
- display: flex;
926
- flex-direction: column;
927
- justify-content: center;
928
- align-items: center;
929
- background-color: inherit;
930
- font-size: 14px;
931
- height: 100%;
932
- width: 100%;
933
- overflow: hidden;
934
- color: var(--react-autoql-text-color-primary); }
764
+ .react-autoql-drawer .watermark {
765
+ color: var(--react-autoql-text-color-primary);
766
+ text-align: center;
767
+ opacity: 0.2;
768
+ top: 6px;
769
+ width: calc(100% - 10px);
770
+ font-size: 13px; }
935
771
 
936
- .react-autoql-response-content-container.html-content {
937
- position: relative;
938
- background-color: inherit;
939
- text-align: left;
940
- font-size: 14px;
941
- height: 95%;
942
- width: 100%;
943
- overflow: hidden;
944
- color: var(--react-autoql-text-color-primary); }
945
- .react-autoql-response-content-container.html-content table th {
946
- border-bottom: 2px solid var(--react-autoql-border-color); }
947
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
948
- border-bottom: 1px solid var(--react-autoql-border-color); }
949
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
950
- border-right: 1px solid var(--react-autoql-border-color); }
951
- .react-autoql-response-content-container.html-content table th,
952
- .react-autoql-response-content-container.html-content table td {
953
- padding: 5px 10px; }
954
- .react-autoql-response-content-container.html-content * {
955
- font-size: inherit; }
956
- .react-autoql-response-content-container.html-content sup,
957
- .react-autoql-response-content-container.html-content sub {
958
- font-size: 10px; }
959
- .react-autoql-response-content-container.html-content > *:first-child {
960
- margin-top: 0 !important; }
961
- .react-autoql-response-content-container.html-content > *:last-child {
962
- margin-bottom: 0 !important; }
963
- .react-autoql-response-content-container.html-content caption {
964
- display: table-caption;
965
- text-align: -webkit-center;
966
- padding-top: unset;
967
- padding-bottom: unset;
968
- color: unset;
969
- text-align: unset;
970
- caption-side: unset; }
772
+ .react-autoql-drawer .condition-list-container {
773
+ position: absolute;
774
+ border: 1px solid var(--react-autoql-text-color-primary);
775
+ border-radius: 100rem;
776
+ background-color: transparent;
777
+ color: var(--react-autoql-text-color-primary);
778
+ padding: 0 5px 0 5px;
779
+ transition: background-color 250ms ease, box-shadow 250ms ease;
780
+ z-index: 9999999;
781
+ width: -webkit-fit-content;
782
+ width: -moz-fit-content;
783
+ width: fit-content;
784
+ height: -webkit-fit-content;
785
+ height: -moz-fit-content;
786
+ height: fit-content; }
971
787
 
972
- .react-autoql-response-content-container.table {
973
- max-height: 100vh !important;
974
- overflow-y: scroll;
975
- scrollbar-width: none; }
788
+ .condition-list-display {
789
+ display: none;
790
+ background-color: var(--react-autoql-background-color-primary);
791
+ border-radius: 4px;
792
+ padding: 5px;
793
+ width: -webkit-fit-content;
794
+ width: -moz-fit-content;
795
+ width: fit-content;
796
+ height: -webkit-fit-content;
797
+ height: -moz-fit-content;
798
+ height: fit-content;
799
+ padding: 10px;
800
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
976
801
 
977
- .react-autoql-response-content-container.table::-webkit-scrollbar {
978
- width: 0;
979
- height: 0; }
802
+ .react-autoql-drawer .react-autoql-drawer:focus {
803
+ outline: none; }
980
804
 
981
- .react-autoql-suggestion-btn {
982
- padding: 6px 14px;
805
+ .react-autoql-drawer .chat-header-container button {
983
806
  background: transparent;
984
- font-family: inherit;
985
- font-size: 12px;
986
- margin-bottom: 5px;
987
- outline: none !important;
807
+ border: none;
808
+ color: white;
809
+ margin: 10px;
810
+ margin-right: 0;
811
+ font-size: 20px;
988
812
  cursor: pointer;
989
- letter-spacing: 0.05em;
990
- transition: all 0.1s ease;
991
- border: 1px solid rgba(0, 0, 0, 0.15);
992
- border-radius: 5px;
993
- color: inherit; }
813
+ outline: none !important; }
994
814
 
995
- .react-autoql-suggestion-btn:hover {
996
- border-color: transparent;
997
- color: white;
998
- background: var(--react-autoql-accent-color); }
815
+ .react-autoql-drawer .chat-header-container button:hover {
816
+ opacity: 0.7; }
999
817
 
1000
- .react-autoql-help-link-btn {
1001
- padding: 6px 14px;
1002
- background: transparent;
1003
- border-radius: 5px;
1004
- font-family: inherit;
1005
- font-size: 12px;
1006
- margin-top: 5px;
1007
- outline: none !important;
818
+ .react-autoql-drawer .chat-header-container button svg {
819
+ width: 35px;
820
+ height: 35px; }
821
+
822
+ .topics-container {
823
+ margin: 5px 0; }
824
+
825
+ .intro-qi-link {
1008
826
  cursor: pointer;
1009
- letter-spacing: 0.05em;
1010
- transition: all 0.1s ease;
1011
- border-color: #e2e2e26e;
1012
- color: inherit; }
827
+ color: var(--react-autoql-accent-color); }
1013
828
 
1014
- .react-autoql-help-link-btn:hover {
1015
- opacity: 0.7; }
829
+ /* custom scrollbar */
830
+ .react-autoql-drawer .chat-message-container > div:last-child {
831
+ opacity: 0;
832
+ transition: opacity 200ms ease; }
1016
833
 
1017
- .react-autoql-help-link-icon {
1018
- width: 15px;
1019
- height: 15px;
1020
- margin-bottom: -3px;
1021
- margin-right: 3px; }
834
+ .react-autoql-drawer .chat-message-container:hover > div:last-child {
835
+ opacity: 1; }
1022
836
 
1023
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1024
- color: var(--react-autoql-success-color); }
837
+ /* rc-drawer */
838
+ .react-autoql-drawer .drawer-content {
839
+ background: white;
840
+ border-radius: 4px;
841
+ overflow: visible;
842
+ opacity: 1;
843
+ transition: opacity 0.3s ease; }
1025
844
 
1026
- .react-autoql-suggestion-message {
1027
- height: 100%;
1028
- width: 100%;
1029
- word-break: break-word; }
845
+ .react-autoql-drawer.closed .drawer-content {
846
+ opacity: 0; }
1030
847
 
1031
- .react-autoql-suggestions-select {
1032
- position: relative;
1033
- display: inline-block;
1034
- height: 30px;
1035
- background: none;
1036
- outline: none !important;
1037
- border: 1px solid;
1038
- font-family: inherit;
1039
- letter-spacing: 0.05em;
1040
- color: #28a8e0;
1041
- cursor: pointer;
1042
- font-size: inherit; }
848
+ .react-autoql-drawer .drawer-handle {
849
+ transition: opacity 0.5s ease;
850
+ overflow: hidden;
851
+ width: 50px;
852
+ height: 50px;
853
+ border-radius: 50px !important;
854
+ font-size: 22px; }
855
+ .react-autoql-drawer .drawer-handle.default-logo {
856
+ background-color: var(--react-autoql-accent-color, #26a7df);
857
+ color: #fff; }
858
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined {
859
+ position: absolute;
860
+ vertical-align: top;
861
+ top: 11px;
862
+ left: 12px; }
863
+ .react-autoql-drawer .drawer-handle.default-logo .react-autoql-bubbles-outlined svg {
864
+ position: absolute;
865
+ width: 26px;
866
+ height: 26px; }
867
+
868
+ .react-autoql-drawer.drawer-right .drawer-handle {
869
+ left: -70px !important; }
870
+
871
+ .react-autoql-drawer.drawer-left .drawer-handle {
872
+ right: -60px !important; }
873
+
874
+ .react-autoql-drawer.drawer-top .drawer-handle {
875
+ bottom: -60px !important; }
876
+
877
+ .react-autoql-drawer.drawer-bottom .drawer-handle {
878
+ top: -60px !important; }
879
+
880
+ .react-autoql-drawer .drawer-handle.hide {
881
+ opacity: 0;
882
+ visibility: hidden; }
883
+
884
+ .react-autoql-drawer .drawer-handle-icon,
885
+ .react-autoql-drawer .drawer-handle-icon::before,
886
+ .react-autoql-drawer .drawer-handle-icon::after {
887
+ background: var(--react-autoql-text-color-primary); }
888
+
889
+ .react-autoql-drawer .drawer-bottom .drawer-content-wrapper,
890
+ .react-autoql-drawer .drawer-top .drawer-content-wrapper {
891
+ left: 0; }
892
+
893
+ .react-autoql-drawer .drawer-content-wrapper {
894
+ background: transparent; }
895
+
896
+ .react-autoql-drawer.drawer-right .drawer-content-wrapper,
897
+ .react-autoql-drawer.drawer-left .drawer-content-wrapper {
898
+ max-width: calc(100vw - 45px) !important;
899
+ min-width: 400px !important; }
900
+
901
+ .react-autoql-drawer.drawer-top .drawer-content-wrapper,
902
+ .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
903
+ max-height: calc(100vh - 45px) !important;
904
+ min-height: 400px !important; }
905
+
906
+ .react-autoql-drawer-resize-handle {
907
+ position: absolute;
908
+ background: transparent; }
909
+ .react-autoql-drawer-resize-handle.right {
910
+ top: 0;
911
+ left: -5px;
912
+ width: 5px;
913
+ height: 100vh;
914
+ cursor: ew-resize; }
915
+ .react-autoql-drawer-resize-handle.left {
916
+ top: 0;
917
+ right: -5px;
918
+ width: 5px;
919
+ height: 100vh;
920
+ cursor: ew-resize; }
921
+ .react-autoql-drawer-resize-handle.top {
922
+ bottom: -5px;
923
+ left: 0;
924
+ height: 5px;
925
+ width: 100vw;
926
+ cursor: ns-resize; }
927
+ .react-autoql-drawer-resize-handle.bottom {
928
+ top: -5px;
929
+ left: 0;
930
+ height: 5px;
931
+ width: 100vw;
932
+ cursor: ns-resize; }
933
+
934
+ .react-autoql-drawer .response-loading-container {
935
+ position: absolute;
936
+ bottom: 45px;
937
+ left: 20px; }
938
+
939
+ /* Tooltips */
940
+ .react-autoql-drawer-tooltip {
941
+ font-family: var(--react-autoql-font-family), sans-serif;
942
+ letter-spacing: 0.04em;
943
+ line-height: 0.9em;
944
+ padding: 7px 15px;
945
+ transition: none;
946
+ opacity: 1 !important;
947
+ z-index: 99999 !important;
948
+ /* necessary to show up on top of rc drawer */ }
949
+
950
+ .interpretation-tooltip {
951
+ font-family: var(--react-autoql-font-family), sans-serif;
952
+ font-size: 12px;
953
+ text-align: left;
954
+ letter-spacing: 0.04em;
955
+ padding: 7px 15px;
956
+ max-width: 400px;
957
+ opacity: 1 !important;
958
+ transition: none;
959
+ z-index: 99999 !important;
960
+ /* necessary to show up on top of rc drawer */ }
961
+
962
+ .react-autoql-condition-lock-menu {
963
+ color: var(--react-autoql-text-color-primary);
964
+ background: var(--react-autoql-background-color-primary);
965
+ min-height: 300px; }
966
+
967
+ .react-tiny-popover-container {
968
+ z-index: 9999;
969
+ border: 1px solid #ababab52;
970
+ border-radius: 4px;
971
+ box-shadow: 0px 0 8px rgba(0, 0, 0, 0.15);
972
+ transition: opacity 0.2s ease 0s !important; }
973
+
974
+ .clear-messages-confirm-popover {
975
+ color: var(--react-autoql-text-color-primary);
976
+ background: var(--react-autoql-background-color-primary);
977
+ text-align: right;
978
+ padding: 18px;
979
+ width: 266px; }
980
+
981
+ .react-autoql-confirm-text {
982
+ text-align: center; }
983
+
984
+ .react-autoql-menu-text {
985
+ text-align: center; }
986
+ .react-autoql-menu-text:hover {
987
+ color: var(--react-autoql-accent-color);
988
+ cursor: pointer; }
989
+
990
+ .react-autoql-confirm-icon {
991
+ color: #faad14 !important;
992
+ vertical-align: middle;
993
+ margin-right: 5px !important;
994
+ margin-bottom: 3px; }
995
+
996
+ .data-messenger-tab-container {
997
+ position: absolute;
998
+ background: transparent;
999
+ display: flex;
1000
+ justify-content: center;
1001
+ align-items: center;
1002
+ pointer-events: none; }
1003
+ .data-messenger-tab-container.right {
1004
+ height: 100vh;
1005
+ width: 60px;
1006
+ left: -60px; }
1007
+ .data-messenger-tab-container.left {
1008
+ height: 100vh;
1009
+ width: 60px;
1010
+ right: -60px; }
1011
+ .data-messenger-tab-container.top {
1012
+ width: 100vw;
1013
+ height: 60px;
1014
+ bottom: -60px; }
1015
+ .data-messenger-tab-container.bottom {
1016
+ width: 100vw;
1017
+ height: 60px;
1018
+ top: -60px; }
1019
+
1020
+ /* Shadow container (this is used to cut off the shadow so it doesnt show in the drawer) */
1021
+ .page-switcher-shadow-container {
1022
+ position: absolute;
1023
+ background: transparent;
1024
+ overflow: hidden; }
1025
+
1026
+ .page-switcher-shadow-container.right {
1027
+ top: 80px;
1028
+ width: 60px; }
1029
+
1030
+ .page-switcher-shadow-container.left {
1031
+ top: 80px;
1032
+ width: 60px; }
1033
+
1034
+ /* Container holding the tabs */
1035
+ .page-switcher-container {
1036
+ box-shadow: -2px 0 8px rgba(0, 0, 0, 0.2);
1037
+ overflow: hidden;
1038
+ box-sizing: border-box;
1039
+ display: flex;
1040
+ pointer-events: all; }
1041
+ .page-switcher-container .tab {
1042
+ position: relative;
1043
+ z-index: 1;
1044
+ background: var(--react-autoql-accent-color);
1045
+ color: #fff;
1046
+ opacity: 1;
1047
+ font-size: 22px;
1048
+ text-align: center;
1049
+ transform: translate(0, 0);
1050
+ cursor: pointer;
1051
+ transition-property: background, color, transform, line-height, height, width, margin-right, margin-top, margin-left, margin-bottom, z-index, opacity;
1052
+ transition-duration: 0.2s; }
1053
+ .page-switcher-container .tab.react-autoql-explore-queries span.react-autoql-icon svg {
1054
+ height: 22px;
1055
+ width: 23px; }
1056
+ .page-switcher-container.right {
1057
+ border-top-left-radius: 5px;
1058
+ border-bottom-left-radius: 5px;
1059
+ margin-top: 20px;
1060
+ margin-left: 20px;
1061
+ margin-bottom: 20px;
1062
+ flex-direction: column; }
1063
+ .page-switcher-container.right .tab {
1064
+ box-shadow: inset -18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1065
+ .page-switcher-container.left {
1066
+ border-top-right-radius: 5px;
1067
+ border-bottom-right-radius: 5px;
1068
+ margin-top: 20px;
1069
+ margin-right: 20px;
1070
+ margin-bottom: 20px;
1071
+ margin-left: -5px;
1072
+ flex-direction: column; }
1073
+ .page-switcher-container.left .tab {
1074
+ box-shadow: inset 18px 0px 8px -10px rgba(0, 0, 0, 0.2); }
1075
+ .page-switcher-container.top {
1076
+ border-bottom-right-radius: 5px;
1077
+ border-bottom-left-radius: 5px;
1078
+ margin-right: 20px;
1079
+ margin-left: 20px;
1080
+ margin-bottom: 20px;
1081
+ flex-direction: row;
1082
+ height: 40px; }
1083
+ .page-switcher-container.top .tab {
1084
+ box-shadow: inset 0px 12px 8px -10px rgba(0, 0, 0, 0.2); }
1085
+ .page-switcher-container.bottom {
1086
+ border-top-left-radius: 5px;
1087
+ border-top-right-radius: 5px;
1088
+ margin-top: 20px;
1089
+ margin-left: 20px;
1090
+ margin-right: 20px;
1091
+ flex-direction: row;
1092
+ height: 40px; }
1093
+ .page-switcher-container.bottom .tab {
1094
+ box-shadow: inset 0px -17px 8px -10px rgba(0, 0, 0, 0.2); }
1043
1095
 
1044
- .no-columns-error-message {
1045
- position: absolute;
1046
- height: 100%;
1047
- width: 100%;
1096
+ /* Individual Tabs */
1097
+ .page-switcher-container .tab {
1048
1098
  display: flex;
1049
1099
  justify-content: center;
1050
- flex-direction: column;
1051
- text-align: center;
1052
- padding: 20px;
1053
- font-size: 13px; }
1054
- .no-columns-error-message .warning-icon {
1055
- font-size: 22px;
1056
- display: block;
1057
- margin-bottom: -13px;
1058
- text-align: center; }
1059
- .no-columns-error-message .eye-icon {
1060
- vertical-align: bottom;
1061
- line-height: 18px; }
1062
-
1063
- /* query validation */
1064
- .react-autoql-query-validation-selector-container {
1065
- display: inline-block;
1066
- position: relative; }
1067
-
1068
- .react-autoql-select-popup-container.query-validation-select {
1069
- padding: 5px 0;
1070
- letter-spacing: 0.03em;
1071
- font-family: var(--react-autoql-font-family), sans-serif; }
1072
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1073
- height: unset;
1074
- font-size: 14px;
1075
- line-height: 24px;
1076
- padding: 0 15px; }
1077
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1078
- color: #d84830; }
1100
+ align-items: center; }
1079
1101
 
1080
- .react-autoql-query-validation-query {
1081
- text-align: center; }
1102
+ .data-messenger-notification-btn {
1103
+ display: flex;
1104
+ flex-direction: column;
1105
+ justify-content: flex-start;
1106
+ line-height: inherit; }
1082
1107
 
1083
- .react-autoql-query-validation-execute-btn {
1084
- height: 38px;
1085
- background: none;
1086
- border-radius: 4px;
1087
- margin-top: 24px;
1088
- width: 100%;
1089
- color: inherit;
1090
- cursor: pointer;
1091
- outline: none !important;
1092
- border-color: #e2e2e26e;
1093
- transition: all 0.2s ease; }
1108
+ .page-switcher-container.right .tab,
1109
+ .page-switcher-container.left .tab {
1110
+ height: 65px; }
1094
1111
 
1095
- .react-autoql-query-validation-execute-btn:hover {
1096
- border-color: #28a8e0; }
1112
+ .page-switcher-container.top .tab,
1113
+ .page-switcher-container.bottom .tab {
1114
+ width: 65px; }
1097
1115
 
1098
- .react-autoql-execute-query-icon {
1099
- font-size: 16px;
1100
- vertical-align: middle !important;
1101
- padding-right: 3px !important; }
1102
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
1103
- height: 19px;
1104
- width: 19px;
1105
- margin-top: 3px;
1106
- margin-right: 4px;
1107
- vertical-align: top;
1108
- fill: var(--react-autoql-accent-color); }
1116
+ .page-switcher-container.bottom .tab {
1117
+ background: var(--react-autoql-background-color-secondary);
1118
+ color: var(--react-autoql-text-color-primary); }
1109
1119
 
1110
- .react-autoql-query-validation-select {
1120
+ .page-switcher-container .tab.active {
1121
+ background: var(--react-autoql-background-color-secondary);
1122
+ color: var(--react-autoql-text-color-primary);
1123
+ box-shadow: -2px 0px 8px 2px rgba(0, 0, 0, 0.2);
1124
+ font-weight: bold;
1111
1125
  position: relative;
1112
- display: inline-block;
1113
- height: 2em;
1114
- background: none;
1115
- outline: none !important;
1116
- border: none;
1117
- letter-spacing: 0.05em;
1118
- font-family: inherit;
1119
- font-size: inherit;
1120
- margin: 0;
1121
- padding: 0;
1122
- border-radius: 0;
1123
- border-bottom: 1px dashed;
1124
- color: var(--react-autoql-accent-color); }
1126
+ z-index: 2; }
1125
1127
 
1126
- .react-autoql-query-validation-delete-button {
1127
- position: relative;
1128
- cursor: pointer;
1129
- margin-bottom: -2px; }
1128
+ .page-switcher-container.bottom .tab.active {
1129
+ background: var(--react-autoql-accent-color);
1130
+ color: #fff;
1131
+ font-weight: bold; }
1130
1132
 
1131
- .react-autoql-chart-tooltip {
1132
- font-family: var(--react-autoql-font-family), sans-serif;
1133
- letter-spacing: 0.04em;
1134
- line-height: 22px;
1135
- font-size: 13px;
1136
- padding: 7px 15px;
1137
- transition: all 0.2s ease !important;
1138
- text-align: left !important;
1139
- opacity: 1 !important;
1140
- z-index: 99999 !important;
1141
- /* necessary to show up on top of rc drawer */ }
1133
+ /* animations */
1134
+ @-webkit-keyframes response-loading1 {
1135
+ 0% {
1136
+ transform: scale(0); }
1137
+ 100% {
1138
+ transform: scale(1); } }
1139
+ @keyframes response-loading1 {
1140
+ 0% {
1141
+ transform: scale(0); }
1142
+ 100% {
1143
+ transform: scale(1); } }
1142
1144
 
1143
- .single-value-response {
1144
- color: inherit;
1145
- cursor: unset;
1146
- font-size: 20px; }
1147
- .single-value-response:hover {
1148
- color: inherit; }
1145
+ @-webkit-keyframes response-loading3 {
1146
+ 0% {
1147
+ transform: scale(1); }
1148
+ 100% {
1149
+ transform: scale(0); } }
1149
1150
 
1150
- .single-value-response.with-drilldown:hover {
1151
- color: inherit;
1152
- text-decoration: underline;
1153
- font-weight: 600;
1154
- cursor: pointer; }
1151
+ @keyframes response-loading3 {
1152
+ 0% {
1153
+ transform: scale(1); }
1154
+ 100% {
1155
+ transform: scale(0); } }
1155
1156
 
1156
- .react-autoql-query-validation-container {
1157
- width: 100%; }
1157
+ @-webkit-keyframes response-loading2 {
1158
+ 0% {
1159
+ transform: translate(0, 0); }
1160
+ 100% {
1161
+ transform: translate(19px, 0); } }
1158
1162
 
1159
- .react-autoql-query-validation-description {
1160
- margin-bottom: 14px; }
1163
+ @keyframes response-loading2 {
1164
+ 0% {
1165
+ transform: translate(0, 0); }
1166
+ 100% {
1167
+ transform: translate(19px, 0); } }
1161
1168
 
1162
- .context-menu {
1163
- background: var(--react-autoql-background-color-primary);
1164
- /* height: 100px; */
1165
- width: 150px;
1166
- padding: 10px 0; }
1169
+ @-webkit-keyframes scale-up-center {
1170
+ 0% {
1171
+ transform: scale(0); }
1172
+ 100% {
1173
+ transform: scale(1); } }
1167
1174
 
1168
- .context-menu-list {
1169
- list-style-type: none;
1170
- width: 100%;
1171
- margin: 0;
1172
- padding: 0; }
1175
+ @keyframes scale-up-center {
1176
+ 0% {
1177
+ transform: scale(0); }
1178
+ 100% {
1179
+ transform: scale(1); } }
1173
1180
 
1174
- .context-menu-list li {
1175
- color: var(--react-autoql-text-color-primary);
1176
- width: 100%;
1177
- height: 35px;
1178
- line-height: 35px;
1179
- padding: 0 20px;
1180
- cursor: pointer; }
1181
+ @-webkit-keyframes fadeIn {
1182
+ 0% {
1183
+ opacity: 0; }
1184
+ 100% {
1185
+ opacity: 1; } }
1181
1186
 
1182
- .context-menu-list li:hover {
1183
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1187
+ @keyframes fadeIn {
1188
+ 0% {
1189
+ opacity: 0; }
1190
+ 100% {
1191
+ opacity: 1; } }
1184
1192
 
1185
- .react-autoql-condition-link {
1186
- background: none !important;
1187
- border: none;
1188
- padding: 0 !important;
1189
- text-decoration: none;
1190
- white-space: nowrap;
1191
- cursor: pointer;
1192
- color: var(--react-autoql-accent-color); }
1193
- .react-autoql-condition-link:hover {
1194
- opacity: 0.9; }
1193
+ @-webkit-keyframes slideDown {
1194
+ 0% {
1195
+ transform: translateY(-100%); }
1196
+ 100% {
1197
+ transform: translateY(0%); } }
1195
1198
 
1196
- .react-autoql-condition-link-filtered {
1197
- text-decoration: none;
1198
- white-space: nowrap;
1199
- cursor: pointer;
1200
- color: var(--react-autoql-accent-color); }
1201
- .react-autoql-condition-link-filtered .react-autoql-custom-icon {
1202
- font-size: 14px;
1203
- vertical-align: middle;
1204
- margin-top: -4px; }
1205
- .react-autoql-condition-link-filtered:hover {
1206
- opacity: 0.9;
1207
- border: none !important; }
1208
- .react-autoql-condition-link-filtered:hover .react-autoql-custom-icon {
1209
- opacity: 0.9; }
1199
+ @keyframes slideDown {
1200
+ 0% {
1201
+ transform: translateY(-100%); }
1202
+ 100% {
1203
+ transform: translateY(0%); } }
1204
+
1205
+ @-webkit-keyframes snackbarFadeout {
1206
+ from {
1207
+ top: 60px;
1208
+ opacity: 1; }
1209
+ to {
1210
+ top: 30px;
1211
+ opacity: 0; } }
1210
1212
 
1211
- .condition-lock-reverse-translation {
1212
- color: var(--react-autoql-text-color-primary);
1213
- background-color: var(--react-autoql-background-color-secondary);
1214
- border-radius: 5px;
1215
- padding: 4px 6px 4px 6px;
1216
- margin: 2px;
1217
- min-height: 26px;
1218
- min-width: 300px; }
1213
+ @keyframes snackbarFadeout {
1214
+ from {
1215
+ top: 60px;
1216
+ opacity: 1; }
1217
+ to {
1218
+ top: 30px;
1219
+ opacity: 0; } }
1219
1220
 
1220
1221
  .react-autoql-step-container a {
1221
1222
  color: var(--react-autoql-accent-color, #26a7df); }
@@ -1238,44 +1239,264 @@ span.react-autoql-icon {
1238
1239
  .notification-frequency-step .frequency-settings-container {
1239
1240
  flex: 0 1 400px; }
1240
1241
 
1241
- .schedule-builder-timezone-section {
1242
- margin: 10px 5px; }
1243
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1244
- display: inline-block;
1245
- width: 300px; }
1242
+ .schedule-builder-timezone-section {
1243
+ margin: 10px 5px; }
1244
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
1245
+ display: inline-block;
1246
+ width: 300px; }
1247
+
1248
+ .react-autoql-notifications-button-container {
1249
+ position: relative;
1250
+ display: inline-block;
1251
+ font-size: inherit;
1252
+ line-height: 1em;
1253
+ width: 1em; }
1254
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1255
+ font-size: 1em;
1256
+ line-height: 0;
1257
+ vertical-align: bottom; }
1258
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1259
+ position: absolute;
1260
+ border: 2px solid #fff;
1261
+ background: #f5222d;
1262
+ border-radius: 6.3em;
1263
+ line-height: 1.3em;
1264
+ left: 0.6em;
1265
+ top: -0.8em;
1266
+ padding: 0.15em 0.5em;
1267
+ text-align: center;
1268
+ color: white;
1269
+ font-size: 0.5em; }
1270
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1271
+ position: absolute;
1272
+ display: inline-block;
1273
+ border: 2px solid #fff;
1274
+ background: #f5222d;
1275
+ border-radius: 50%;
1276
+ height: 0.6em;
1277
+ width: 0.6em;
1278
+ left: 0.5em;
1279
+ top: -2px; }
1280
+
1281
+ .react-autoql-notification-settings {
1282
+ background-color: var(--react-autoql-background-color-secondary);
1283
+ color: var(--react-autoql-text-color-primary);
1284
+ padding-top: 20px;
1285
+ height: 100%; }
1286
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1287
+ margin: 20px;
1288
+ margin-top: 10px;
1289
+ border-radius: 4px;
1290
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1291
+ background-color: var(--react-autoql-background-color-primary);
1292
+ overflow: hidden; }
1293
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1294
+ height: 55px;
1295
+ line-height: 55px;
1296
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1297
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1298
+ margin-right: 10px;
1299
+ cursor: pointer; }
1300
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1301
+ padding-right: 20px;
1302
+ font-size: 17px;
1303
+ opacity: 1;
1304
+ cursor: pointer;
1305
+ color: var(--react-autoql-accent-color); }
1306
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1307
+ background: rgba(0, 0, 0, 0.01); }
1308
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1309
+ opacity: 0;
1310
+ margin-right: 20px;
1311
+ font-size: 16px;
1312
+ transition: all 0.2s ease;
1313
+ color: var(--react-autoql-text-color-primary);
1314
+ cursor: pointer; }
1315
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1316
+ color: var(--react-autoql-accent-color);
1317
+ opacity: 1 !important; }
1318
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1319
+ opacity: 0.5; }
1320
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1321
+ display: flex;
1322
+ justify-content: space-between;
1323
+ height: 56px;
1324
+ padding-left: 25px;
1325
+ padding-right: 8px;
1326
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1327
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1328
+ margin-bottom: 4px;
1329
+ margin-right: 8px; }
1330
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1331
+ margin-bottom: 4px;
1332
+ margin-right: 8px;
1333
+ opacity: 0.5;
1334
+ pointer-events: none; }
1335
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1336
+ display: flex;
1337
+ justify-content: space-between;
1338
+ align-items: center;
1339
+ padding: 5px 20px;
1340
+ padding-bottom: 0;
1341
+ color: var(--react-autoql-text-color-primary); }
1342
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1343
+ display: inline-block;
1344
+ height: 35px;
1345
+ width: 35px;
1346
+ border-radius: 20px;
1347
+ background: var(--react-autoql-accent-color, #26a7df);
1348
+ color: white;
1349
+ line-height: 38px;
1350
+ text-align: center;
1351
+ font-size: 20px;
1352
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1353
+ transition: all 0.2s ease;
1354
+ margin-right: 5px;
1355
+ cursor: pointer; }
1356
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1357
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1358
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1359
+ white-space: nowrap;
1360
+ overflow: hidden;
1361
+ text-overflow: ellipsis;
1362
+ padding-right: 10px; }
1363
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1364
+ opacity: 0.5; }
1365
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1366
+ vertical-align: middle;
1367
+ height: 18px; }
1368
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1369
+ display: flex;
1370
+ align-items: center;
1371
+ margin-top: -25px; }
1372
+
1373
+ .notification-rule-add-btn-outer,
1374
+ .notification-rule-validate-btn-outer {
1375
+ text-align: center;
1376
+ border-style: dashed !important;
1377
+ height: 38px;
1378
+ line-height: 25px;
1379
+ margin: 0 !important;
1380
+ overflow: hidden; }
1381
+
1382
+ .notification-rule-outer-container {
1383
+ position: relative;
1384
+ border: 1px solid transparent;
1385
+ border-radius: 4px; }
1386
+ .notification-rule-outer-container.outlined {
1387
+ border-color: rgba(0, 0, 0, 0.15);
1388
+ padding: 0 20px;
1389
+ padding-bottom: 12px; }
1390
+
1391
+ .notification-outer-all-any {
1392
+ position: absolute;
1393
+ left: 0;
1394
+ top: 50%; }
1395
+
1396
+ .notification-first-group-btn-container {
1397
+ display: flex;
1398
+ justify-content: space-between; }
1399
+
1400
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1401
+ border: none; }
1402
+
1403
+ .notification-list-loading-container {
1404
+ text-align: center;
1405
+ padding-top: 100px;
1406
+ color: var(--react-autoql-text-color-primary);
1407
+ height: 100%;
1408
+ overflow: hidden;
1409
+ background: var(--react-autoql-background-color-secondary); }
1410
+
1411
+ .empty-notifications-message {
1412
+ color: var(--react-autoql-text-color-primary);
1413
+ text-align: center;
1414
+ margin-top: 75px; }
1415
+ .empty-notifications-message div {
1416
+ opacity: 0.6; }
1417
+ .empty-notifications-message .empty-notifications-title {
1418
+ font-size: 16px;
1419
+ font-weight: bold;
1420
+ margin-bottom: 5px; }
1421
+ .empty-notifications-message .empty-notifications-img {
1422
+ width: 250px;
1423
+ height: 250px; }
1424
+
1425
+ .react-autoql-notification-list-container {
1426
+ height: 100%;
1427
+ padding: 20px;
1428
+ overflow-y: auto;
1429
+ background: var(--react-autoql-background-color-secondary); }
1430
+
1431
+ .react-autoql-notification-dismiss-all {
1432
+ text-align: right;
1433
+ margin-bottom: 12px;
1434
+ padding-right: 10px;
1435
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1436
+ transition: color 0.1s ease; }
1437
+ .react-autoql-notification-dismiss-all span {
1438
+ opacity: 0.8;
1439
+ cursor: pointer; }
1440
+ .react-autoql-notification-dismiss-all span:hover {
1441
+ opacity: 1; }
1442
+
1443
+ .react-autoql-notification-display-name-input {
1444
+ width: 100%; }
1445
+
1446
+ .react-autoql-notification-message-input {
1447
+ width: 100%; }
1448
+
1449
+ .react-autoql-notification-list-item:nth-of-type(0) {
1450
+ -webkit-animation-delay: 0s;
1451
+ animation-delay: 0s; }
1452
+
1453
+ .react-autoql-notification-list-item:nth-of-type(1) {
1454
+ -webkit-animation-delay: 0.1s;
1455
+ animation-delay: 0.1s; }
1456
+
1457
+ .react-autoql-notification-list-item:nth-of-type(2) {
1458
+ -webkit-animation-delay: 0.2s;
1459
+ animation-delay: 0.2s; }
1460
+
1461
+ .react-autoql-notification-list-item:nth-of-type(3) {
1462
+ -webkit-animation-delay: 0.3s;
1463
+ animation-delay: 0.3s; }
1464
+
1465
+ .react-autoql-notification-list-item:nth-of-type(4) {
1466
+ -webkit-animation-delay: 0.4s;
1467
+ animation-delay: 0.4s; }
1468
+
1469
+ .react-autoql-notification-list-item:nth-of-type(5) {
1470
+ -webkit-animation-delay: 0.5s;
1471
+ animation-delay: 0.5s; }
1472
+
1473
+ .react-autoql-notification-list-item:nth-of-type(6) {
1474
+ -webkit-animation-delay: 0.6s;
1475
+ animation-delay: 0.6s; }
1476
+
1477
+ .react-autoql-notification-list-item:nth-of-type(7) {
1478
+ -webkit-animation-delay: 0.7s;
1479
+ animation-delay: 0.7s; }
1480
+
1481
+ .react-autoql-notification-list-item:nth-of-type(8) {
1482
+ -webkit-animation-delay: 0.8s;
1483
+ animation-delay: 0.8s; }
1246
1484
 
1247
- .react-autoql-notifications-button-container {
1248
- position: relative;
1249
- display: inline-block;
1250
- font-size: inherit;
1251
- line-height: 1em;
1252
- width: 1em; }
1253
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1254
- font-size: 1em;
1255
- line-height: 0;
1256
- vertical-align: bottom; }
1257
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1258
- position: absolute;
1259
- border: 2px solid #fff;
1260
- background: #f5222d;
1261
- border-radius: 6.3em;
1262
- line-height: 1.3em;
1263
- left: 0.6em;
1264
- top: -0.8em;
1265
- padding: 0.15em 0.5em;
1266
- text-align: center;
1267
- color: white;
1268
- font-size: 0.5em; }
1269
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1270
- position: absolute;
1271
- display: inline-block;
1272
- border: 2px solid #fff;
1273
- background: #f5222d;
1274
- border-radius: 50%;
1275
- height: 0.6em;
1276
- width: 0.6em;
1277
- left: 0.5em;
1278
- top: -2px; }
1485
+ .react-autoql-notification-list-item:nth-of-type(9) {
1486
+ -webkit-animation-delay: 0.9s;
1487
+ animation-delay: 0.9s; }
1488
+
1489
+ .react-autoql-notification-list-item:nth-of-type(10) {
1490
+ -webkit-animation-delay: 1s;
1491
+ animation-delay: 1s; }
1492
+
1493
+ @-webkit-keyframes slideIn {
1494
+ 0% {
1495
+ opacity: 0;
1496
+ top: 500px; }
1497
+ 100% {
1498
+ opacity: 1;
1499
+ top: 0; } }
1279
1500
 
1280
1501
  .react-autoql-notification-list-item {
1281
1502
  display: flex;
@@ -1494,195 +1715,43 @@ span.react-autoql-icon {
1494
1715
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1495
1716
  margin-bottom: -1px; }
1496
1717
 
1497
- .notification-list-loading-container {
1498
- text-align: center;
1499
- padding-top: 100px;
1500
- color: var(--react-autoql-text-color-primary);
1501
- height: 100%;
1502
- overflow: hidden;
1503
- background: var(--react-autoql-background-color-secondary); }
1504
-
1505
- .empty-notifications-message {
1506
- color: var(--react-autoql-text-color-primary);
1507
- text-align: center;
1508
- margin-top: 75px; }
1509
- .empty-notifications-message div {
1510
- opacity: 0.6; }
1511
- .empty-notifications-message .empty-notifications-title {
1512
- font-size: 16px;
1513
- font-weight: bold;
1514
- margin-bottom: 5px; }
1515
- .empty-notifications-message .empty-notifications-img {
1516
- width: 250px;
1517
- height: 250px; }
1518
-
1519
- .react-autoql-notification-list-container {
1520
- height: 100%;
1521
- padding: 20px;
1522
- overflow-y: auto;
1523
- background: var(--react-autoql-background-color-secondary); }
1524
-
1525
- .react-autoql-notification-dismiss-all {
1526
- text-align: right;
1527
- margin-bottom: 12px;
1528
- padding-right: 10px;
1529
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1530
- transition: color 0.1s ease; }
1531
- .react-autoql-notification-dismiss-all span {
1532
- opacity: 0.8;
1533
- cursor: pointer; }
1534
- .react-autoql-notification-dismiss-all span:hover {
1535
- opacity: 1; }
1536
-
1537
- .react-autoql-notification-display-name-input {
1538
- width: 100%; }
1539
-
1540
- .react-autoql-notification-message-input {
1541
- width: 100%; }
1542
-
1543
- .react-autoql-notification-list-item:nth-of-type(0) {
1544
- -webkit-animation-delay: 0s;
1545
- animation-delay: 0s; }
1546
-
1547
- .react-autoql-notification-list-item:nth-of-type(1) {
1548
- -webkit-animation-delay: 0.1s;
1549
- animation-delay: 0.1s; }
1550
-
1551
- .react-autoql-notification-list-item:nth-of-type(2) {
1552
- -webkit-animation-delay: 0.2s;
1553
- animation-delay: 0.2s; }
1554
-
1555
- .react-autoql-notification-list-item:nth-of-type(3) {
1556
- -webkit-animation-delay: 0.3s;
1557
- animation-delay: 0.3s; }
1558
-
1559
- .react-autoql-notification-list-item:nth-of-type(4) {
1560
- -webkit-animation-delay: 0.4s;
1561
- animation-delay: 0.4s; }
1562
-
1563
- .react-autoql-notification-list-item:nth-of-type(5) {
1564
- -webkit-animation-delay: 0.5s;
1565
- animation-delay: 0.5s; }
1566
-
1567
- .react-autoql-notification-list-item:nth-of-type(6) {
1568
- -webkit-animation-delay: 0.6s;
1569
- animation-delay: 0.6s; }
1570
-
1571
- .react-autoql-notification-list-item:nth-of-type(7) {
1572
- -webkit-animation-delay: 0.7s;
1573
- animation-delay: 0.7s; }
1574
-
1575
- .react-autoql-notification-list-item:nth-of-type(8) {
1576
- -webkit-animation-delay: 0.8s;
1577
- animation-delay: 0.8s; }
1718
+ .notification-rule-outer-container {
1719
+ position: relative;
1720
+ border: 1px solid transparent;
1721
+ border-radius: 4px;
1722
+ padding-bottom: 5px; }
1578
1723
 
1579
- .react-autoql-notification-list-item:nth-of-type(9) {
1580
- -webkit-animation-delay: 0.9s;
1581
- animation-delay: 0.9s; }
1724
+ .expression-error-message {
1725
+ padding-left: 5px; }
1582
1726
 
1583
- .react-autoql-notification-list-item:nth-of-type(10) {
1584
- -webkit-animation-delay: 1s;
1585
- animation-delay: 1s; }
1727
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1728
+ border: none; }
1586
1729
 
1587
- @-webkit-keyframes slideIn {
1588
- 0% {
1589
- opacity: 0;
1590
- top: 500px; }
1591
- 100% {
1592
- opacity: 1;
1593
- top: 0; } }
1730
+ .notification-modal-content .react-autoql-step-content p {
1731
+ margin-bottom: 0.5em;
1732
+ margin-top: 0.5em;
1733
+ padding-left: 8px; }
1594
1734
 
1595
- .react-autoql-notification-settings {
1596
- background-color: var(--react-autoql-background-color-secondary);
1597
- color: var(--react-autoql-text-color-primary);
1598
- padding-top: 20px;
1599
- height: 100%; }
1600
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1601
- margin: 20px;
1602
- margin-top: 10px;
1603
- border-radius: 4px;
1604
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1605
- background-color: var(--react-autoql-background-color-primary);
1606
- overflow: hidden; }
1607
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1608
- height: 55px;
1609
- line-height: 55px;
1610
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1611
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1612
- margin-right: 10px;
1613
- cursor: pointer; }
1614
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1615
- padding-right: 20px;
1616
- font-size: 17px;
1617
- opacity: 1;
1618
- cursor: pointer;
1619
- color: var(--react-autoql-accent-color); }
1620
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1621
- background: rgba(0, 0, 0, 0.01); }
1622
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1623
- opacity: 0;
1624
- margin-right: 20px;
1625
- font-size: 16px;
1626
- transition: all 0.2s ease;
1627
- color: var(--react-autoql-text-color-primary);
1628
- cursor: pointer; }
1629
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1630
- color: var(--react-autoql-accent-color);
1631
- opacity: 1 !important; }
1632
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1633
- opacity: 0.5; }
1634
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1635
- display: flex;
1636
- justify-content: space-between;
1637
- height: 56px;
1638
- padding-left: 25px;
1639
- padding-right: 8px;
1640
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1641
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1642
- margin-bottom: 4px;
1643
- margin-right: 8px; }
1644
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1645
- margin-bottom: 4px;
1646
- margin-right: 8px;
1647
- opacity: 0.5;
1648
- pointer-events: none; }
1649
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1650
- display: flex;
1651
- justify-content: space-between;
1652
- align-items: center;
1653
- padding: 5px 20px;
1654
- padding-bottom: 0;
1655
- color: var(--react-autoql-text-color-primary); }
1656
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1657
- display: inline-block;
1658
- height: 35px;
1659
- width: 35px;
1660
- border-radius: 20px;
1661
- background: var(--react-autoql-accent-color, #26a7df);
1662
- color: white;
1663
- line-height: 38px;
1664
- text-align: center;
1665
- font-size: 20px;
1666
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1667
- transition: all 0.2s ease;
1668
- margin-right: 5px;
1669
- cursor: pointer; }
1670
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1671
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1672
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1673
- white-space: nowrap;
1674
- overflow: hidden;
1675
- text-overflow: ellipsis;
1676
- padding-right: 10px; }
1677
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1678
- opacity: 0.5; }
1679
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1680
- vertical-align: middle;
1681
- height: 18px; }
1682
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1683
- display: flex;
1684
- align-items: center;
1685
- margin-top: -25px; }
1735
+ .notification-modal-content .step-btn-container {
1736
+ text-align: right;
1737
+ display: flex;
1738
+ min-height: 50px; }
1739
+
1740
+ .expression-valid-checkmark.react-autoql-icon svg {
1741
+ color: var(--react-autoql-success-color); }
1742
+
1743
+ .expression-invalid-message-container {
1744
+ max-width: 75%;
1745
+ float: left;
1746
+ text-align: left !important;
1747
+ display: flex;
1748
+ flex-direction: row;
1749
+ align-items: left;
1750
+ justify-content: left; }
1751
+
1752
+ .expression-invalid-message {
1753
+ color: var(--react-autoql-danger-color);
1754
+ display: 'inline-block'; }
1686
1755
 
1687
1756
  .react-autoql-dashboard .react-grid-item {
1688
1757
  background: var(--react-autoql-background-color-primary, #fff);
@@ -2180,117 +2249,174 @@ span.react-autoql-icon {
2180
2249
  .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2181
2250
  background: inherit; }
2182
2251
 
2183
- .notification-rule-outer-container {
2184
- position: relative;
2185
- border: 1px solid transparent;
2186
- border-radius: 4px;
2187
- padding-bottom: 5px; }
2252
+ .react-autoql-table-container {
2253
+ height: 100%;
2254
+ max-width: 100%;
2255
+ background-color: inherit; }
2188
2256
 
2189
- .expression-error-message {
2190
- padding-left: 5px; }
2257
+ .react-autoql-table {
2258
+ margin-bottom: 0; }
2191
2259
 
2192
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2193
- border: none; }
2260
+ /* tabulator */
2261
+ .react-autoql-table.tabulator,
2262
+ .react-autoql-table.tabulator .tabulator-row,
2263
+ .react-autoql-table.tabulator .tabulator-header,
2264
+ .react-autoql-table.tabulator .tabulator-headers,
2265
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2266
+ .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
2267
+ background-color: inherit; }
2194
2268
 
2195
- .notification-rule-add-btn-outer,
2196
- .notification-rule-validate-btn-outer {
2197
- text-align: center;
2198
- border-style: dashed !important;
2199
- height: 38px;
2200
- line-height: 25px;
2201
- margin: 0 !important;
2202
- overflow: hidden; }
2269
+ .react-autoql-table-container.supports-drilldown
2270
+ .react-autoql-table.tabulator
2271
+ .tabulator-row.tabulator-unselectable:hover {
2272
+ cursor: pointer !important;
2273
+ background-color: var(--react-autoql-hover-color) !important; }
2203
2274
 
2204
- .notification-rule-outer-container {
2205
- position: relative;
2206
- border: 1px solid transparent;
2207
- border-radius: 4px; }
2208
- .notification-rule-outer-container.outlined {
2209
- border-color: rgba(0, 0, 0, 0.15);
2210
- padding: 0 20px;
2211
- padding-bottom: 12px; }
2275
+ .react-autoql-table.tabulator
2276
+ .tabulator-header
2277
+ .tabulator-col.tabulator-sortable:hover {
2278
+ background-color: var(--react-autoql-hover-color) !important; }
2212
2279
 
2213
- .notification-outer-all-any {
2214
- position: absolute;
2215
- left: 0;
2216
- top: 50%; }
2280
+ .react-autoql-table.tabulator .tabulator-header .tabulator-col,
2281
+ .react-autoql-table.tabulator .tabulator-cell {
2282
+ border-color: var(--react-autoql-border-color); }
2217
2283
 
2218
- .notification-first-group-btn-container {
2219
- display: flex;
2220
- justify-content: space-between; }
2284
+ .react-autoql-table.tabulator .tabulator-header {
2285
+ border-bottom: 2px solid var(--react-autoql-border-color); }
2221
2286
 
2222
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2223
- border: none; }
2287
+ .react-autoql-table.tabulator {
2288
+ background-color: inherit;
2289
+ height: 100%; }
2224
2290
 
2225
- .notification-modal-content .react-autoql-step-content p {
2226
- margin-bottom: 0.5em;
2227
- margin-top: 0.5em;
2228
- padding-left: 8px; }
2291
+ .react-autoql-table .tabulator-row {
2292
+ /* user-select: none; This breaks copy/paste */
2293
+ border-bottom: 1px solid var(--react-autoql-border-color); }
2229
2294
 
2230
- .notification-modal-content .step-btn-container {
2231
- text-align: right;
2232
- display: flex;
2233
- min-height: 50px; }
2295
+ .tabulator-cell:not(:first-child) {
2296
+ border-left: 1px solid !important;
2297
+ border-color: rgba(0, 0, 0, 0.06) !important; }
2234
2298
 
2235
- .expression-valid-checkmark.react-autoql-icon svg {
2236
- color: var(--react-autoql-success-color); }
2299
+ .react-autoql-table .tabulator-tableHolder {
2300
+ max-height: calc(100% - 38px) !important;
2301
+ background-color: inherit; }
2237
2302
 
2238
- .expression-invalid-message-container {
2239
- max-width: 75%;
2240
- float: left;
2241
- text-align: left !important;
2242
- display: flex;
2243
- flex-direction: row;
2244
- align-items: left;
2245
- justify-content: left; }
2303
+ .react-autoql-table.tabulator
2304
+ .tabulator-header
2305
+ .tabulator-col
2306
+ .tabulator-col-content {
2307
+ padding: 8px 5px; }
2246
2308
 
2247
- .expression-invalid-message {
2248
- color: var(--react-autoql-danger-color);
2249
- display: 'inline-block'; }
2309
+ .react-autoql-table.tabulator
2310
+ .tabulator-header
2311
+ .tabulator-col
2312
+ .tabulator-col-content
2313
+ .tabulator-arrow {
2314
+ opacity: 0;
2315
+ border-left: 4px solid transparent !important;
2316
+ border-right: 4px solid transparent !important;
2317
+ right: 4px;
2318
+ top: calc(50% - 3px); }
2250
2319
 
2251
- .react-autoql-btn {
2252
- border-radius: 4px;
2253
- cursor: pointer;
2254
- outline: none !important;
2255
- transition: all 0.2s ease;
2256
- width: auto;
2257
- display: inline-block; }
2320
+ .react-autoql-table.tabulator
2321
+ .tabulator-header
2322
+ .tabulator-col:hover
2323
+ .tabulator-col-content
2324
+ .tabulator-arrow {
2325
+ opacity: 1 !important; }
2258
2326
 
2259
- .react-autoql-btn.disabled {
2260
- opacity: 0.4;
2261
- cursor: not-allowed;
2262
- pointer-events: none; }
2327
+ .react-autoql-table.tabulator
2328
+ .tabulator-header
2329
+ .tabulator-col.tabulator-sortable[aria-sort='desc']
2330
+ .tabulator-col-content
2331
+ .tabulator-arrow {
2332
+ border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
2263
2333
 
2264
- .react-autoql-btn.small {
2265
- padding: 2px 8px;
2266
- margin: 2px 3px; }
2334
+ .react-autoql-table.tabulator
2335
+ .tabulator-header
2336
+ .tabulator-col.tabulator-sortable[aria-sort='asc']
2337
+ .tabulator-col-content
2338
+ .tabulator-arrow,
2339
+ .react-autoql-table.tabulator
2340
+ .tabulator-header
2341
+ .tabulator-col.tabulator-sortable[aria-sort='none']
2342
+ .tabulator-col-content
2343
+ .tabulator-arrow {
2344
+ border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
2267
2345
 
2268
- .react-autoql-btn.large {
2269
- padding: 5px 16px;
2270
- margin: 2px 5px; }
2346
+ .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
2347
+ display: unset;
2348
+ opacity: 0;
2349
+ background-color: transparent;
2350
+ width: 7px;
2351
+ height: 7px;
2352
+ -webkit-transition: all 0.3s ease;
2353
+ transition: all 0.3s ease; }
2271
2354
 
2272
- .react-autoql-btn.default {
2273
- color: inherit;
2355
+ .react-autoql-table.tabulator .tabulator-tableHolder {
2356
+ min-height: calc(100% - 40px) !important;
2357
+ height: calc(100% - 40px) !important;
2358
+ max-height: calc(100% - 40px) !important; }
2359
+
2360
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
2361
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
2362
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2363
+ background-color: transparent; }
2364
+
2365
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2366
+ background-color: rgba(0, 0, 0, 0.2);
2367
+ border-radius: 7px;
2368
+ border: 0px; }
2369
+
2370
+ .react-autoql-table .tabulator-header-filter input {
2274
2371
  border: 1px solid var(--react-autoql-border-color);
2275
- background: inherit; }
2276
- .react-autoql-btn.default:hover {
2277
- border-color: var(--react-autoql-accent-color);
2278
- color: var(--react-autoql-accent-color); }
2372
+ border-radius: 4px;
2373
+ background: transparent;
2374
+ padding: 4px 9px !important;
2375
+ outline: none !important; }
2279
2376
 
2280
- .react-autoql-btn.primary {
2281
- background: var(--react-autoql-accent-color);
2282
- border: 1px solid var(--react-autoql-accent-color);
2283
- color: white; }
2284
- .react-autoql-btn.primary:hover {
2285
- opacity: 0.8; }
2377
+ .react-autoql-table .tabulator-header-filter input:focus {
2378
+ border: 1px solid #28a8e0; }
2286
2379
 
2287
- .react-autoql-btn.danger {
2288
- color: var(--react-autoql-danger-color, #ca0b00);
2289
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2290
- background: inherit; }
2291
- .react-autoql-btn.danger:hover {
2292
- background-color: var(--react-autoql-danger-color, #ca0b00);
2293
- color: #fff; }
2380
+ /* These are necessary because we are always rendering the
2381
+ filter (just display: none when not used) instead of re-rendering
2382
+ the whole table when the filter button is clicked */
2383
+ .react-autoql-table-container:not(.filtering)
2384
+ .react-autoql-table
2385
+ .tabulator-header-filter {
2386
+ display: none; }
2387
+
2388
+ .react-autoql-table-container:not(.filtering)
2389
+ .react-autoql-table
2390
+ .tabulator-col {
2391
+ height: auto !important; }
2392
+
2393
+ .tabulator-table .tabulator-row .tabulator-cell {
2394
+ min-height: 38px; }
2395
+
2396
+ /* Center header titles */
2397
+ .react-autoql-table .tabulator-header .tabulator-col {
2398
+ text-align: center !important; }
2399
+
2400
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2401
+ padding-left: 10px !important;
2402
+ padding-right: 10px !important; }
2403
+
2404
+ .filter-tag {
2405
+ color: #2ecc40;
2406
+ border: 1px solid;
2407
+ padding: 2px 4px;
2408
+ border-radius: 4px;
2409
+ font-weight: 400;
2410
+ font-size: 10px;
2411
+ margin-right: 5px;
2412
+ vertical-align: top;
2413
+ line-height: 21px; }
2414
+
2415
+ .comparison-value-positive {
2416
+ color: #2ecc40; }
2417
+
2418
+ .comparison-value-negative {
2419
+ color: #e80000; }
2294
2420
 
2295
2421
  .query-tips-page-container {
2296
2422
  height: 100%;
@@ -2464,6 +2590,165 @@ span.react-autoql-icon {
2464
2590
  100% {
2465
2591
  opacity: 1; } }
2466
2592
 
2593
+ .react-autoql-btn {
2594
+ border-radius: 4px;
2595
+ cursor: pointer;
2596
+ outline: none !important;
2597
+ transition: all 0.2s ease;
2598
+ width: auto;
2599
+ display: inline-block; }
2600
+
2601
+ .react-autoql-btn.disabled {
2602
+ opacity: 0.4;
2603
+ cursor: not-allowed;
2604
+ pointer-events: none; }
2605
+
2606
+ .react-autoql-btn.small {
2607
+ padding: 2px 8px;
2608
+ margin: 2px 3px; }
2609
+
2610
+ .react-autoql-btn.large {
2611
+ padding: 5px 16px;
2612
+ margin: 2px 5px; }
2613
+
2614
+ .react-autoql-btn.default {
2615
+ color: inherit;
2616
+ border: 1px solid var(--react-autoql-border-color);
2617
+ background: inherit; }
2618
+ .react-autoql-btn.default:hover {
2619
+ border-color: var(--react-autoql-accent-color);
2620
+ color: var(--react-autoql-accent-color); }
2621
+
2622
+ .react-autoql-btn.primary {
2623
+ background: var(--react-autoql-accent-color);
2624
+ border: 1px solid var(--react-autoql-accent-color);
2625
+ color: white; }
2626
+ .react-autoql-btn.primary:hover {
2627
+ opacity: 0.8; }
2628
+
2629
+ .react-autoql-btn.danger {
2630
+ color: var(--react-autoql-danger-color, #ca0b00);
2631
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2632
+ background: inherit; }
2633
+ .react-autoql-btn.danger:hover {
2634
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2635
+ color: #fff; }
2636
+
2637
+ .autoql-options-toolbar {
2638
+ position: absolute;
2639
+ background: inherit;
2640
+ padding: 5px;
2641
+ border-radius: 6px;
2642
+ line-height: 28px;
2643
+ background: var(--react-autoql-background-color-primary);
2644
+ border: 1px solid var(--react-autoql-border-color); }
2645
+ .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
2646
+ display: block; }
2647
+ .autoql-options-toolbar .react-autoql-toolbar-btn {
2648
+ color: var(--react-autoql-accent-color); }
2649
+
2650
+ .copy-sql-modal-content {
2651
+ position: relative;
2652
+ height: 60vh; }
2653
+ .copy-sql-modal-content .copy-sql-formatted-text {
2654
+ height: 100%;
2655
+ width: 100%;
2656
+ padding: 10px;
2657
+ resize: none;
2658
+ background: var(--react-autoql-background-color-secondary); }
2659
+ .copy-sql-modal-content .copy-sql-btn {
2660
+ color: var(--react-autoql-text-color);
2661
+ background-color: var(--react-autoql-background-color-primary);
2662
+ position: absolute;
2663
+ top: 3px;
2664
+ right: 0;
2665
+ opacity: 0;
2666
+ transition: opacity 0.3s ease; }
2667
+ .copy-sql-modal-content .sql-copied {
2668
+ color: var(--react-autoql-success-color) !important; }
2669
+ .copy-sql-modal-content:hover .copy-sql-btn {
2670
+ opacity: 1; }
2671
+
2672
+ .ReactModal__Overlay {
2673
+ background-color: transparent !important;
2674
+ transition: background-color 0.2s ease-in-out;
2675
+ z-index: 9999; }
2676
+
2677
+ .ReactModal__Overlay--after-open {
2678
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2679
+
2680
+ .ReactModal__Overlay--before-close {
2681
+ background-color: transparent !important; }
2682
+
2683
+ .ReactModal__Content {
2684
+ display: flex;
2685
+ flex-direction: column;
2686
+ transform: scale(0);
2687
+ transition: all 0.2s ease-in-out;
2688
+ color: var(--react-autoql-text-color-primary);
2689
+ border: 1px solid var(--react-autoql-border-color) !important;
2690
+ background: var(--react-autoql-background-color-primary) !important;
2691
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2692
+ padding: 0 !important;
2693
+ margin: auto auto;
2694
+ max-width: 90vw;
2695
+ max-height: calc(100vh - 90px); }
2696
+ .ReactModal__Content input.react-autoql-input,
2697
+ .ReactModal__Content textarea.react-autoql-input,
2698
+ .ReactModal__Content textarea {
2699
+ border-color: var(--react-autoql-border-color);
2700
+ color: var(--react-autoql-text-color-primary);
2701
+ background: var(--react-autoql-background-color-primary, white); }
2702
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2703
+ color: var(--react-autoql-text-color-placeholder); }
2704
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2705
+ color: var(--react-autoql-text-color-placeholder); }
2706
+ .ReactModal__Content input.react-autoql-input::placeholder,
2707
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2708
+ .ReactModal__Content textarea::placeholder {
2709
+ color: var(--react-autoql-text-color-placeholder); }
2710
+
2711
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2712
+ transform: scale(1); }
2713
+
2714
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2715
+ transform: scale(0); }
2716
+
2717
+ .react-autoql-modal-header {
2718
+ position: relative;
2719
+ text-align: center;
2720
+ flex: 0 0 52px;
2721
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2722
+ padding: 14px 60px;
2723
+ font-size: 16px; }
2724
+
2725
+ .react-autoql-modal-footer {
2726
+ position: relative;
2727
+ flex: 0 0 52px;
2728
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2729
+ text-align: right;
2730
+ padding: 8px 10px; }
2731
+
2732
+ .react-autoql-modal-body {
2733
+ display: flex;
2734
+ flex-direction: column;
2735
+ padding: 25px;
2736
+ flex: 1;
2737
+ overflow: hidden; }
2738
+ .react-autoql-modal-body h3 {
2739
+ color: var(--react-autoql-text-color-primary); }
2740
+
2741
+ .react-autoql-modal-close-btn {
2742
+ position: absolute !important;
2743
+ top: 10px;
2744
+ right: 18px;
2745
+ font-size: 22px;
2746
+ opacity: 0.6 !important;
2747
+ cursor: pointer; }
2748
+
2749
+ .react-autoql-modal-close-btn:hover {
2750
+ opacity: 1 !important; }
2751
+
2467
2752
  .chat-single-message-container {
2468
2753
  transition: background-color 0.2s ease;
2469
2754
  padding-top: 6px; }
@@ -2659,113 +2944,33 @@ so we dont have to redraw the whole table */
2659
2944
  @-webkit-keyframes scale-up-br {
2660
2945
  0% {
2661
2946
  transform: scale(0.5);
2662
- transform-origin: 100% 100%; }
2663
- 100% {
2664
- transform: scale(1);
2665
- transform-origin: 100% 100%; } }
2666
- @keyframes scale-up-br {
2667
- 0% {
2668
- transform: scale(0.5);
2669
- transform-origin: 100% 100%; }
2670
- 100% {
2671
- transform: scale(1);
2672
- transform-origin: 100% 100%; } }
2673
-
2674
- @-webkit-keyframes scale-up-bl {
2675
- 0% {
2676
- transform: scale(0.5);
2677
- transform-origin: 0% 100%; }
2678
- 100% {
2679
- transform: scale(1);
2680
- transform-origin: 0% 100%; } }
2681
-
2682
- @keyframes scale-up-bl {
2683
- 0% {
2684
- transform: scale(0.5);
2685
- transform-origin: 0% 100%; }
2686
- 100% {
2687
- transform: scale(1);
2688
- transform-origin: 0% 100%; } }
2689
-
2690
- .ReactModal__Overlay {
2691
- background-color: transparent !important;
2692
- transition: background-color 0.2s ease-in-out;
2693
- z-index: 9999; }
2694
-
2695
- .ReactModal__Overlay--after-open {
2696
- background-color: rgba(0, 0, 0, 0.25) !important; }
2697
-
2698
- .ReactModal__Overlay--before-close {
2699
- background-color: transparent !important; }
2700
-
2701
- .ReactModal__Content {
2702
- display: flex;
2703
- flex-direction: column;
2704
- transform: scale(0);
2705
- transition: all 0.2s ease-in-out;
2706
- color: var(--react-autoql-text-color-primary);
2707
- border: 1px solid var(--react-autoql-border-color) !important;
2708
- background: var(--react-autoql-background-color-primary) !important;
2709
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2710
- padding: 0 !important;
2711
- margin: auto auto;
2712
- max-width: 90vw;
2713
- max-height: calc(100vh - 90px); }
2714
- .ReactModal__Content input.react-autoql-input,
2715
- .ReactModal__Content textarea.react-autoql-input,
2716
- .ReactModal__Content textarea {
2717
- border-color: var(--react-autoql-border-color);
2718
- color: var(--react-autoql-text-color-primary);
2719
- background: var(--react-autoql-background-color-primary, white); }
2720
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2721
- color: var(--react-autoql-text-color-placeholder); }
2722
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2723
- color: var(--react-autoql-text-color-placeholder); }
2724
- .ReactModal__Content input.react-autoql-input::placeholder,
2725
- .ReactModal__Content textarea.react-autoql-input::placeholder,
2726
- .ReactModal__Content textarea::placeholder {
2727
- color: var(--react-autoql-text-color-placeholder); }
2728
-
2729
- .ReactModal__Overlay--after-open .ReactModal__Content {
2730
- transform: scale(1); }
2731
-
2732
- .ReactModal__Overlay--before-close .ReactModal__Content {
2733
- transform: scale(0); }
2734
-
2735
- .react-autoql-modal-header {
2736
- position: relative;
2737
- text-align: center;
2738
- flex: 0 0 52px;
2739
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2740
- padding: 14px 60px;
2741
- font-size: 16px; }
2742
-
2743
- .react-autoql-modal-footer {
2744
- position: relative;
2745
- flex: 0 0 52px;
2746
- border-top: 1px solid rgba(0, 0, 0, 0.05);
2747
- text-align: right;
2748
- padding: 8px 10px; }
2749
-
2750
- .react-autoql-modal-body {
2751
- display: flex;
2752
- flex-direction: column;
2753
- padding: 25px;
2754
- flex: 1;
2755
- overflow: hidden; }
2756
- .react-autoql-modal-body h3 {
2757
- color: var(--react-autoql-text-color-primary); }
2947
+ transform-origin: 100% 100%; }
2948
+ 100% {
2949
+ transform: scale(1);
2950
+ transform-origin: 100% 100%; } }
2951
+ @keyframes scale-up-br {
2952
+ 0% {
2953
+ transform: scale(0.5);
2954
+ transform-origin: 100% 100%; }
2955
+ 100% {
2956
+ transform: scale(1);
2957
+ transform-origin: 100% 100%; } }
2758
2958
 
2759
- .react-autoql-modal-close-btn {
2760
- position: absolute !important;
2761
- top: 10px;
2762
- right: 18px;
2763
- font-size: 22px;
2764
- opacity: 0.6 !important;
2765
- cursor: pointer; }
2959
+ @-webkit-keyframes scale-up-bl {
2960
+ 0% {
2961
+ transform: scale(0.5);
2962
+ transform-origin: 0% 100%; }
2963
+ 100% {
2964
+ transform: scale(1);
2965
+ transform-origin: 0% 100%; } }
2766
2966
 
2767
- .react-autoql-modal-close-btn:hover {
2768
- opacity: 1 !important; }
2967
+ @keyframes scale-up-bl {
2968
+ 0% {
2969
+ transform: scale(0.5);
2970
+ transform-origin: 0% 100%; }
2971
+ 100% {
2972
+ transform: scale(1);
2973
+ transform-origin: 0% 100%; } }
2769
2974
 
2770
2975
  .react-autoql-cascader {
2771
2976
  position: relative;
@@ -2821,6 +3026,9 @@ so we dont have to redraw the whole table */
2821
3026
  .react-autoql-cascader .options-container:not(:last-child) {
2822
3027
  border-right: 1px solid #d3d3d352; }
2823
3028
 
3029
+ .react-autoql-condition-lock-menu {
3030
+ min-width: 400px !important; }
3031
+
2824
3032
  .react-autoql-filter-locking-title-container {
2825
3033
  display: inline-block;
2826
3034
  width: 100%;
@@ -2830,7 +3038,11 @@ so we dont have to redraw the whole table */
2830
3038
  width: 95%;
2831
3039
  float: left;
2832
3040
  color: var(--react-autoql-text-color-primary);
2833
- margin-bottom: 0; }
3041
+ margin-bottom: 0;
3042
+ margin-top: 0;
3043
+ display: block;
3044
+ font-size: 1.17em !important;
3045
+ font-weight: bold; }
2834
3046
  .react-autoql-filter-locking-title-container h3 span {
2835
3047
  color: var(--react-autoql-accent-color); }
2836
3048
  .react-autoql-filter-locking-title-container button {
@@ -2840,7 +3052,8 @@ so we dont have to redraw the whole table */
2840
3052
  cursor: pointer;
2841
3053
  color: var(--react-autoql-hover-color); }
2842
3054
 
2843
- .react-autoql-filter-locking-empty-list {
3055
+ #react-autoql-filter-description-id {
3056
+ visibility: hidden;
2844
3057
  color: var(--react-autoql-text-color-primary);
2845
3058
  background-color: var(--react-autoql-background-color-secondary);
2846
3059
  border-radius: 5px;
@@ -2851,13 +3064,18 @@ so we dont have to redraw the whole table */
2851
3064
  top: 20px;
2852
3065
  box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
2853
3066
  z-index: 999999; }
2854
- .react-autoql-filter-locking-empty-list span {
3067
+ #react-autoql-filter-description-id span {
2855
3068
  color: var(--react-autoql-accent-color); }
2856
- .react-autoql-filter-locking-empty-list p {
3069
+ #react-autoql-filter-description-id p {
2857
3070
  width: 96%;
2858
3071
  float: right;
2859
3072
  margin-bottom: 0; }
2860
3073
 
3074
+ #react-autoql-filter-description-id.show {
3075
+ visibility: visible;
3076
+ -webkit-animation: fadeIn 1s;
3077
+ animation: fadeIn 1s; }
3078
+
2861
3079
  .react-autoql-condition-locking-input {
2862
3080
  padding: 5px;
2863
3081
  padding-left: 20px;
@@ -2874,30 +3092,33 @@ so we dont have to redraw the whole table */
2874
3092
  /* Default styles outside of data messenger */
2875
3093
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2876
3094
  background: var(--react-autoql-background-color-primary);
2877
- color: #5d5d5d; }
3095
+ color: var(--react-autoql-text-color-primary); }
3096
+ .react-autoql-condition-locking-input::-moz-placeholder {
3097
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
3098
+ .react-autoql-condition-locking-input:-ms-input-placeholder {
3099
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
3100
+ .react-autoql-condition-locking-input::placeholder {
3101
+ color: rgba(var(--react-autoql-text-color-placeholder), 2) !important; }
2878
3102
 
2879
3103
  .react-autoql-condition-locking-input:hover {
2880
3104
  box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
2881
3105
 
2882
- .condition-table {
3106
+ .react-autoql-condition-table {
2883
3107
  min-width: 95%;
2884
- margin: 10px auto; }
2885
-
2886
- .condition-table thead {
2887
- padding-left: 10px; }
3108
+ margin: 10px auto;
3109
+ table-layout: fixed; }
2888
3110
 
2889
- .condition-table th {
2890
- text-align: left;
2891
- padding: 4px;
2892
- margin: 0 10px 0 10px;
2893
- font-weight: 800; }
2894
- .condition-table th span {
2895
- color: var(--react-autoql-accent-color); }
3111
+ .react-autoql-condition-table thead {
3112
+ padding-left: 10px;
3113
+ display: table-header-group;
3114
+ width: 100%;
3115
+ flex: 1 1 auto; }
2896
3116
 
2897
- .condition-table .condition-table-list-item {
3117
+ .react-autoql-condition-table .react-autoql-condition-table-list-item {
2898
3118
  text-overflow: ellipsis;
2899
3119
  white-space: nowrap;
2900
- overflow: hidden; }
3120
+ overflow: hidden;
3121
+ width: 60%; }
2901
3122
 
2902
3123
  .react-autoql-condition-lock-menu-footer {
2903
3124
  bottom: 0;
@@ -2925,25 +3146,52 @@ so we dont have to redraw the whole table */
2925
3146
  .react-autoql-accept-conditions-button span:hover {
2926
3147
  opacity: 1; }
2927
3148
 
2928
- .condition-table tr {
2929
- cursor: pointer; }
2930
- .condition-table tr:hover {
2931
- background: var(--react-autoql-accent-color);
2932
- color: white; }
3149
+ .react-autoql-condition-list {
3150
+ padding: 0;
3151
+ margin: 0 auto;
3152
+ min-height: 182px; }
3153
+
3154
+ tbody::-webkit-scrollbar {
3155
+ -webkit-appearance: none;
3156
+ width: 7px; }
3157
+
3158
+ tbody::-webkit-scrollbar-thumb {
3159
+ border-radius: 5px;
3160
+ background-color: rgba(0, 0, 0, 0.5);
3161
+ box-shadow: 0 0 1px rgba(255, 255, 255, 0.5); }
2933
3162
 
2934
- .condition-table td {
3163
+ .react-autoql-condition-list .react-autoql-condition-table thead {
2935
3164
  text-align: left;
2936
- padding: 4px;
3165
+ width: 100%;
2937
3166
  margin: 0 10px 0 10px;
2938
- padding-left: 10px; }
3167
+ font-weight: 800; }
3168
+ .react-autoql-condition-list .react-autoql-condition-table thead span {
3169
+ color: var(--react-autoql-accent-color);
3170
+ padding: 5px; }
2939
3171
 
2940
- .condition-list {
2941
- padding: 0;
2942
- margin: 0 auto;
3172
+ .react-autoql-condition-list .react-autoql-condition-table tbody {
3173
+ display: block;
2943
3174
  overflow-y: scroll;
2944
- min-height: 182px; }
3175
+ max-height: 260px;
3176
+ width: 100%;
3177
+ flex: 1 1 auto;
3178
+ padding-left: 10px; }
3179
+
3180
+ .react-autoql-condition-list .react-autoql-condition-table tr {
3181
+ display: table;
3182
+ table-layout: fixed;
3183
+ width: 100%; }
3184
+
3185
+ .react-autoql-condition-list .react-autoql-condition-table th {
3186
+ display: table-cell;
3187
+ padding-left: 10px; }
3188
+
3189
+ .react-autoql-condition-list td {
3190
+ display: table-cell;
3191
+ padding: 2px;
3192
+ padding-left: 10px; }
2945
3193
 
2946
- .condition-list-loading-container {
3194
+ .react-autoql-condition-list-loading-container {
2947
3195
  display: flex;
2948
3196
  height: 180px;
2949
3197
  width: 100%;
@@ -2951,23 +3199,11 @@ so we dont have to redraw the whole table */
2951
3199
  align-items: center;
2952
3200
  justify-content: center; }
2953
3201
 
2954
- .condition-list-item {
2955
- cursor: pointer;
2956
- padding: 4px;
2957
- margin: 0 10px 0 10px;
2958
- display: flex;
2959
- justify-content: space-between;
2960
- border-radius: 2px;
2961
- padding-left: 10px; }
2962
- .condition-list-item:hover {
2963
- background: var(--react-autoql-accent-color);
2964
- color: white; }
2965
-
2966
- .empty-condition-list {
3202
+ .react-autoql-empty-condition-list {
2967
3203
  text-align: center;
2968
3204
  padding: 20px;
2969
3205
  height: 140px; }
2970
- .empty-condition-list p {
3206
+ .react-autoql-empty-condition-list p {
2971
3207
  margin-top: 20px !important;
2972
3208
  vertical-align: middle; }
2973
3209
 
@@ -3029,305 +3265,170 @@ so we dont have to redraw the whole table */
3029
3265
  opacity: 0.5; }
3030
3266
 
3031
3267
  .autoql-condition-locking-menu-container input::placeholder {
3032
- opacity: 0.5; }
3033
-
3034
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3035
- margin: 0;
3036
- padding: 0;
3037
- list-style-type: none; }
3038
-
3039
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3040
- cursor: pointer;
3041
- padding: 2px;
3042
- padding-left: 18px;
3043
- letter-spacing: 0.05em;
3044
- line-height: 22.5px; }
3045
-
3046
- .autoql-condition-locking-menu-container
3047
- .react-autosuggest__suggestion--highlighted {
3048
- background-color: rgba(0, 0, 0, 0.1) !important; }
3049
-
3050
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3051
- padding: 10px 0 0 10px;
3052
- font-size: 12px;
3053
- color: #777; }
3054
-
3055
- .react-autoql-filter-setting-info-card {
3056
- color: var(--react-autoql-text-color-primary);
3057
- background-color: var(--react-autoql-background-color-secondary);
3058
- border-radius: 5px;
3059
- padding: 2px 6px 2px 6px;
3060
- margin: 4px 10px 4px 10px;
3061
- display: inline-block;
3062
- position: absolute;
3063
- top: 40px;
3064
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3065
- z-index: 9999; }
3066
- .react-autoql-filter-setting-info-card span {
3067
- color: var(--react-autoql-accent-color); }
3068
- .react-autoql-filter-setting-info-card p {
3069
- margin-bottom: 0 !important; }
3070
- .react-autoql-filter-setting-info-card p span {
3071
- color: var(--react-autoql-accent-color); }
3072
-
3073
- #react-autoql-condition-show-message {
3074
- visibility: hidden;
3075
- min-width: 200px;
3076
- line-height: 1 !important;
3077
- font-size: 14px !important;
3078
- background-color: var(--react-autoql-background-color-secondary);
3079
- text-align: center;
3080
- border-radius: 4px;
3081
- padding: 6px;
3082
- position: fixed;
3083
- top: 20px;
3084
- display: block;
3085
- z-index: 999999999;
3086
- transform: translateX(85%);
3087
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3088
- #react-autoql-condition-show-message span {
3089
- color: var(--react-autoql-accent-color); }
3090
-
3091
- #react-autoql-condition-show-message.show {
3092
- visibility: visible;
3093
- -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3094
- animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3095
-
3096
- @-webkit-keyframes snackbarFadein {
3097
- from {
3098
- top: 0;
3099
- opacity: 0; }
3100
- to {
3101
- top: 20px;
3102
- opacity: 1; } }
3103
-
3104
- @keyframes snackbarFadein {
3105
- from {
3106
- top: 0;
3107
- opacity: 0; }
3108
- to {
3109
- top: 20px;
3110
- opacity: 1; } }
3111
-
3112
- @-webkit-keyframes snackbarFadeout {
3113
- from {
3114
- top: 20px;
3115
- opacity: 1; }
3116
- to {
3117
- top: 0;
3118
- opacity: 0; } }
3119
-
3120
- @keyframes snackbarFadeout {
3121
- from {
3122
- top: 20px;
3123
- opacity: 1; }
3124
- to {
3125
- top: 0;
3126
- opacity: 0; } }
3127
-
3128
- .react-autoql-table-container {
3129
- height: 100%;
3130
- max-width: 100%;
3131
- background-color: inherit; }
3132
-
3133
- .react-autoql-table {
3134
- margin-bottom: 0; }
3135
-
3136
- /* tabulator */
3137
- .react-autoql-table.tabulator,
3138
- .react-autoql-table.tabulator .tabulator-row,
3139
- .react-autoql-table.tabulator .tabulator-header,
3140
- .react-autoql-table.tabulator .tabulator-headers,
3141
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3142
- .react-autoql-table.tabulator .tabulator-tableHolder .tabulator-table {
3143
- background-color: inherit; }
3144
-
3145
- .react-autoql-table-container.supports-drilldown
3146
- .react-autoql-table.tabulator
3147
- .tabulator-row.tabulator-unselectable:hover {
3148
- cursor: pointer !important;
3149
- background-color: var(--react-autoql-hover-color) !important; }
3150
-
3151
- .react-autoql-table.tabulator
3152
- .tabulator-header
3153
- .tabulator-col.tabulator-sortable:hover {
3154
- background-color: var(--react-autoql-hover-color) !important; }
3155
-
3156
- .react-autoql-table.tabulator .tabulator-header .tabulator-col,
3157
- .react-autoql-table.tabulator .tabulator-cell {
3158
- border-color: var(--react-autoql-border-color); }
3159
-
3160
- .react-autoql-table.tabulator .tabulator-header {
3161
- border-bottom: 2px solid var(--react-autoql-border-color); }
3162
-
3163
- .react-autoql-table.tabulator {
3164
- background-color: inherit;
3165
- height: 100%; }
3166
-
3167
- .react-autoql-table .tabulator-row {
3168
- /* user-select: none; This breaks copy/paste */
3169
- border-bottom: 1px solid var(--react-autoql-border-color); }
3170
-
3171
- .tabulator-cell:not(:first-child) {
3172
- border-left: 1px solid !important;
3173
- border-color: rgba(0, 0, 0, 0.06) !important; }
3174
-
3175
- .react-autoql-table .tabulator-tableHolder {
3176
- max-height: calc(100% - 38px) !important;
3177
- background-color: inherit; }
3178
-
3179
- .react-autoql-table.tabulator
3180
- .tabulator-header
3181
- .tabulator-col
3182
- .tabulator-col-content {
3183
- padding: 8px 5px; }
3184
-
3185
- .react-autoql-table.tabulator
3186
- .tabulator-header
3187
- .tabulator-col
3188
- .tabulator-col-content
3189
- .tabulator-arrow {
3190
- opacity: 0;
3191
- border-left: 4px solid transparent !important;
3192
- border-right: 4px solid transparent !important;
3193
- right: 4px;
3194
- top: calc(50% - 3px); }
3195
-
3196
- .react-autoql-table.tabulator
3197
- .tabulator-header
3198
- .tabulator-col:hover
3199
- .tabulator-col-content
3200
- .tabulator-arrow {
3201
- opacity: 1 !important; }
3268
+ opacity: 0.5; }
3202
3269
 
3203
- .react-autoql-table.tabulator
3204
- .tabulator-header
3205
- .tabulator-col.tabulator-sortable[aria-sort='desc']
3206
- .tabulator-col-content
3207
- .tabulator-arrow {
3208
- border-top: 4px solid rgba(0, 0, 0, 0.2) !important; }
3270
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3271
+ margin: 0;
3272
+ padding: 0;
3273
+ list-style-type: none; }
3209
3274
 
3210
- .react-autoql-table.tabulator
3211
- .tabulator-header
3212
- .tabulator-col.tabulator-sortable[aria-sort='asc']
3213
- .tabulator-col-content
3214
- .tabulator-arrow,
3215
- .react-autoql-table.tabulator
3216
- .tabulator-header
3217
- .tabulator-col.tabulator-sortable[aria-sort='none']
3218
- .tabulator-col-content
3219
- .tabulator-arrow {
3220
- border-bottom: 4px solid rgba(0, 0, 0, 0.2) !important; }
3275
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3276
+ cursor: pointer;
3277
+ padding: 2px;
3278
+ padding-left: 18px;
3279
+ letter-spacing: 0.05em;
3280
+ line-height: 22.5px; }
3221
3281
 
3222
- .react-autoql-table .tabulator-tableHolder::-webkit-scrollbar {
3223
- display: unset;
3224
- opacity: 0;
3225
- background-color: transparent;
3226
- width: 7px;
3227
- height: 7px;
3228
- -webkit-transition: all 0.3s ease;
3229
- transition: all 0.3s ease; }
3282
+ .autoql-condition-locking-menu-container
3283
+ .react-autosuggest__suggestion--highlighted {
3284
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3230
3285
 
3231
- .react-autoql-table.tabulator .tabulator-tableHolder {
3232
- min-height: calc(100% - 40px) !important;
3233
- height: calc(100% - 40px) !important;
3234
- max-height: calc(100% - 40px) !important; }
3286
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3287
+ padding: 10px 0 0 10px;
3288
+ font-size: 12px;
3289
+ color: #777; }
3235
3290
 
3236
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track,
3237
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-track-piece,
3238
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
3239
- background-color: transparent; }
3291
+ #react-autoql-filter-setting-info-card {
3292
+ visibility: hidden;
3293
+ color: var(--react-autoql-text-color-primary);
3294
+ background-color: var(--react-autoql-background-color-secondary);
3295
+ border-radius: 5px;
3296
+ padding: 2px 6px 2px 6px;
3297
+ margin: 4px 10px 4px 10px;
3298
+ display: inline-block;
3299
+ position: absolute;
3300
+ top: 40px;
3301
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4);
3302
+ z-index: 9999; }
3303
+ #react-autoql-filter-setting-info-card span {
3304
+ color: var(--react-autoql-accent-color); }
3305
+ #react-autoql-filter-setting-info-card p {
3306
+ margin-bottom: 0 !important; }
3307
+ #react-autoql-filter-setting-info-card p span {
3308
+ color: var(--react-autoql-accent-color); }
3240
3309
 
3241
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
3242
- background-color: rgba(0, 0, 0, 0.2);
3243
- border-radius: 7px;
3244
- border: 0px; }
3310
+ .react-autoql-highlight-row {
3311
+ background-color: var(--react-autoql-accent-color);
3312
+ color: white;
3313
+ -webkit-animation-name: highlightIn, highlightOut;
3314
+ animation-name: highlightIn, highlightOut;
3315
+ -webkit-animation-duration: 400ms, 400ms;
3316
+ animation-duration: 400ms, 400ms;
3317
+ -webkit-animation-delay: 0ms, 1500ms;
3318
+ animation-delay: 0ms, 1500ms;
3319
+ -webkit-animation-timing-function: ease-in, ease-out;
3320
+ animation-timing-function: ease-in, ease-out;
3321
+ -webkit-animation-iteration-count: 1, 1;
3322
+ animation-iteration-count: 1, 1; }
3323
+
3324
+ #react-autoql-filter-setting-info-card.show {
3325
+ visibility: visible;
3326
+ -webkit-animation: fadeIn 1s;
3327
+ animation: fadeIn 1s; }
3245
3328
 
3246
- .react-autoql-table .tabulator-header-filter input {
3247
- border: 1px solid var(--react-autoql-border-color);
3329
+ #react-autoql-condition-show-message {
3330
+ visibility: hidden;
3331
+ min-width: 200px;
3332
+ line-height: 1 !important;
3333
+ font-size: 14px !important;
3334
+ background-color: var(--react-autoql-background-color-secondary);
3335
+ text-align: center;
3248
3336
  border-radius: 4px;
3249
- background: transparent;
3250
- padding: 4px 9px !important;
3251
- outline: none !important; }
3337
+ padding: 6px;
3338
+ position: fixed;
3339
+ top: 20px;
3340
+ display: block;
3341
+ z-index: 999999999;
3342
+ left: 50%;
3343
+ transform: translate(-50%, -50%);
3344
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
3345
+ #react-autoql-condition-show-message span {
3346
+ color: var(--react-autoql-accent-color); }
3252
3347
 
3253
- .react-autoql-table .tabulator-header-filter input:focus {
3254
- border: 1px solid #28a8e0; }
3348
+ #react-autoql-condition-show-message.show {
3349
+ visibility: visible;
3350
+ -webkit-animation: snackbarFadein 1s, snackbarFadeout 1s 2s;
3351
+ animation: snackbarFadein 1s, snackbarFadeout 1s 2s; }
3255
3352
 
3256
- /* These are necessary because we are always rendering the
3257
- filter (just display: none when not used) instead of re-rendering
3258
- the whole table when the filter button is clicked */
3259
- .react-autoql-table-container:not(.filtering)
3260
- .react-autoql-table
3261
- .tabulator-header-filter {
3262
- display: none; }
3353
+ @-webkit-keyframes snackbarFadein {
3354
+ from {
3355
+ top: 0;
3356
+ opacity: 0; }
3357
+ to {
3358
+ top: 20px;
3359
+ opacity: 1; } }
3263
3360
 
3264
- .react-autoql-table-container:not(.filtering)
3265
- .react-autoql-table
3266
- .tabulator-col {
3267
- height: auto !important; }
3361
+ @keyframes snackbarFadein {
3362
+ from {
3363
+ top: 0;
3364
+ opacity: 0; }
3365
+ to {
3366
+ top: 20px;
3367
+ opacity: 1; } }
3268
3368
 
3269
- .tabulator-table .tabulator-row .tabulator-cell {
3270
- min-height: 38px; }
3369
+ @-webkit-keyframes snackbarFadeout {
3370
+ from {
3371
+ top: 20px;
3372
+ opacity: 1; }
3373
+ to {
3374
+ top: 0;
3375
+ opacity: 0; } }
3271
3376
 
3272
- /* Center header titles */
3273
- .react-autoql-table .tabulator-header .tabulator-col {
3274
- text-align: center !important; }
3377
+ @keyframes snackbarFadeout {
3378
+ from {
3379
+ top: 20px;
3380
+ opacity: 1; }
3381
+ to {
3382
+ top: 0;
3383
+ opacity: 0; } }
3275
3384
 
3276
- .react-autoql-table .tabulator-header .tabulator-col-title {
3277
- padding-left: 10px !important;
3278
- padding-right: 10px !important; }
3385
+ @-webkit-keyframes fadeIn {
3386
+ from {
3387
+ opacity: 0;
3388
+ transform: translate3d(0, -20%, 0); }
3389
+ to {
3390
+ opacity: 1;
3391
+ transform: translate3d(0, 0, 0); } }
3279
3392
 
3280
- .filter-tag {
3281
- color: #2ecc40;
3282
- border: 1px solid;
3283
- padding: 2px 4px;
3284
- border-radius: 4px;
3285
- font-weight: 400;
3286
- font-size: 10px;
3287
- margin-right: 5px;
3288
- vertical-align: top;
3289
- line-height: 21px; }
3393
+ @keyframes fadeIn {
3394
+ from {
3395
+ opacity: 0;
3396
+ transform: translate3d(0, -20%, 0); }
3397
+ to {
3398
+ opacity: 1;
3399
+ transform: translate3d(0, 0, 0); } }
3290
3400
 
3291
- .comparison-value-positive {
3292
- color: #2ecc40; }
3401
+ @-webkit-keyframes highlightOut {
3402
+ 100% {
3403
+ background-color: var(--react-autoql-background-color-primary);
3404
+ color: var(--react-autoql-text-color-primary); }
3405
+ 0% {
3406
+ background-color: var(--react-autoql-accent-color);
3407
+ color: white; } }
3293
3408
 
3294
- .comparison-value-negative {
3295
- color: #e80000; }
3409
+ @keyframes highlightOut {
3410
+ 100% {
3411
+ background-color: var(--react-autoql-background-color-primary);
3412
+ color: var(--react-autoql-text-color-primary); }
3413
+ 0% {
3414
+ background-color: var(--react-autoql-accent-color);
3415
+ color: white; } }
3296
3416
 
3297
- .autoql-options-toolbar {
3298
- position: absolute;
3299
- background: inherit;
3300
- padding: 5px;
3301
- border-radius: 6px;
3302
- line-height: 28px;
3303
- background: var(--react-autoql-background-color-primary);
3304
- border: 1px solid var(--react-autoql-border-color); }
3305
- .autoql-options-toolbar.vertical .react-autoql-toolbar-btn {
3306
- display: block; }
3307
- .autoql-options-toolbar .react-autoql-toolbar-btn {
3308
- color: var(--react-autoql-accent-color); }
3417
+ @-webkit-keyframes highlightIn {
3418
+ 100% {
3419
+ background-color: var(--react-autoql-accent-color);
3420
+ color: white; }
3421
+ 0% {
3422
+ background-color: var(--react-autoql-background-color-primary);
3423
+ color: var(--react-autoql-text-color-primary); } }
3309
3424
 
3310
- .copy-sql-modal-content {
3311
- position: relative;
3312
- height: 60vh; }
3313
- .copy-sql-modal-content .copy-sql-formatted-text {
3314
- height: 100%;
3315
- width: 100%;
3316
- padding: 10px;
3317
- resize: none;
3318
- background: var(--react-autoql-background-color-secondary); }
3319
- .copy-sql-modal-content .copy-sql-btn {
3320
- color: var(--react-autoql-text-color);
3425
+ @keyframes highlightIn {
3426
+ 100% {
3427
+ background-color: var(--react-autoql-accent-color);
3428
+ color: white; }
3429
+ 0% {
3321
3430
  background-color: var(--react-autoql-background-color-primary);
3322
- position: absolute;
3323
- top: 3px;
3324
- right: 0;
3325
- opacity: 0;
3326
- transition: opacity 0.3s ease; }
3327
- .copy-sql-modal-content .sql-copied {
3328
- color: var(--react-autoql-success-color) !important; }
3329
- .copy-sql-modal-content:hover .copy-sql-btn {
3330
- opacity: 1; }
3431
+ color: var(--react-autoql-text-color-primary); } }
3331
3432
 
3332
3433
  .react-autoql-chart-container {
3333
3434
  position: relative;
@@ -3415,49 +3516,18 @@ the whole table when the filter button is clicked */
3415
3516
  margin: 0;
3416
3517
  padding: 0; }
3417
3518
  .axis-selector-container .axis-selector-content li {
3418
- color: var(--react-autoql-text-color-primary);
3419
- width: 100%;
3420
- height: 30px;
3421
- line-height: 30px;
3422
- padding: 0 15px;
3423
- cursor: pointer; }
3424
- .axis-selector-container .axis-selector-content li:hover {
3425
- background: rgba(0, 0, 0, 0.05); }
3426
-
3427
- .axis-selector-apply-btn {
3428
- background: var(--react-autoql-background-color-primary);
3429
- padding: 5px; }
3430
-
3431
- .viz-toolbar {
3432
- position: absolute;
3433
- background: inherit;
3434
- padding: 5px;
3435
- border-radius: 6px;
3436
- line-height: 28px;
3437
- border: 1px solid #d3d3d352; }
3438
- .viz-toolbar.vertical .react-autoql-toolbar-btn {
3439
- display: block; }
3440
-
3441
- .react-autoql-toolbar-btn {
3442
- height: 28px;
3443
- width: 28px;
3444
- background: none;
3445
- border: none;
3446
- font-size: 16px;
3447
- line-height: 28px;
3448
- vertical-align: top;
3449
- color: var(--react-autoql-accent-color);
3450
- cursor: pointer;
3451
- outline: none !important; }
3452
-
3453
- .react-autoql-toolbar-btn.green {
3454
- color: #2ecc40; }
3455
-
3456
- .react-autoql-toolbar-btn.red {
3457
- color: #e80000; }
3519
+ color: var(--react-autoql-text-color-primary);
3520
+ width: 100%;
3521
+ height: 30px;
3522
+ line-height: 30px;
3523
+ padding: 0 15px;
3524
+ cursor: pointer; }
3525
+ .axis-selector-container .axis-selector-content li:hover {
3526
+ background: rgba(0, 0, 0, 0.05); }
3458
3527
 
3459
- .react-autoql-toolbar-btn:hover {
3460
- opacity: 0.7; }
3528
+ .axis-selector-apply-btn {
3529
+ background: var(--react-autoql-background-color-primary);
3530
+ padding: 5px; }
3461
3531
 
3462
3532
  .react-autoql-radio-btn-container {
3463
3533
  display: inline-block;
@@ -3530,6 +3600,37 @@ the whole table when the filter button is clicked */
3530
3600
  border-top-right-radius: 4px;
3531
3601
  border-bottom-right-radius: 4px; }
3532
3602
 
3603
+ .viz-toolbar {
3604
+ position: absolute;
3605
+ background: inherit;
3606
+ padding: 5px;
3607
+ border-radius: 6px;
3608
+ line-height: 28px;
3609
+ border: 1px solid #d3d3d352; }
3610
+ .viz-toolbar.vertical .react-autoql-toolbar-btn {
3611
+ display: block; }
3612
+
3613
+ .react-autoql-toolbar-btn {
3614
+ height: 28px;
3615
+ width: 28px;
3616
+ background: none;
3617
+ border: none;
3618
+ font-size: 16px;
3619
+ line-height: 28px;
3620
+ vertical-align: top;
3621
+ color: var(--react-autoql-accent-color);
3622
+ cursor: pointer;
3623
+ outline: none !important; }
3624
+
3625
+ .react-autoql-toolbar-btn.green {
3626
+ color: #2ecc40; }
3627
+
3628
+ .react-autoql-toolbar-btn.red {
3629
+ color: #e80000; }
3630
+
3631
+ .react-autoql-toolbar-btn:hover {
3632
+ opacity: 0.7; }
3633
+
3533
3634
  .content {
3534
3635
  margin: 2rem; }
3535
3636
 
@@ -3663,6 +3764,57 @@ the whole table when the filter button is clicked */
3663
3764
  background: var(--react-autoql-accent-color); }
3664
3765
 
3665
3766
 
3767
+ .react-autoql-input-container {
3768
+ position: relative;
3769
+ margin: 2px 5px;
3770
+ display: inline-block; }
3771
+ .react-autoql-input-container .react-autoql-input {
3772
+ border: 1px solid rgba(0, 0, 0, 0.1);
3773
+ border-radius: 4px;
3774
+ line-height: 32px;
3775
+ min-height: 34px;
3776
+ padding: 0 10px;
3777
+ width: 100%;
3778
+ outline: none !important;
3779
+ transition: all 0.2s ease;
3780
+ transition-property: border-color, color, opacity; }
3781
+ .react-autoql-input-container .react-autoql-input.with-icon {
3782
+ padding-left: 38px; }
3783
+ .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3784
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3785
+ color: rgba(0, 0, 0, 0.2);
3786
+ opacity: 1;
3787
+ /* Firefox */
3788
+ font-style: italic; }
3789
+ .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3790
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3791
+ color: rgba(0, 0, 0, 0.2);
3792
+ opacity: 1;
3793
+ /* Firefox */
3794
+ font-style: italic; }
3795
+ .react-autoql-input-container .react-autoql-input::placeholder {
3796
+ /* Chrome, Firefox, Opera, Safari 10.1+ */
3797
+ color: rgba(0, 0, 0, 0.2);
3798
+ opacity: 1;
3799
+ /* Firefox */
3800
+ font-style: italic; }
3801
+ .react-autoql-input-container .react-autoql-input-icon {
3802
+ position: absolute;
3803
+ left: 12px;
3804
+ top: 8px;
3805
+ opacity: 0.4;
3806
+ transition: all 0.2s ease; }
3807
+ .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3808
+ height: 17px;
3809
+ width: 17px; }
3810
+ .react-autoql-input-container:hover .react-autoql-input,
3811
+ .react-autoql-input-container .react-autoql-input:focus {
3812
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3813
+ .react-autoql-input-container:hover .react-autoql-input-icon,
3814
+ .react-autoql-input-container .react-autoql-input-icon.focus {
3815
+ opacity: 1;
3816
+ color: var(--react-autoql-accent-color, #26a7df); }
3817
+
3666
3818
  .react-autoql-steps-container {
3667
3819
  margin: 10px; }
3668
3820
 
@@ -3732,110 +3884,6 @@ the whole table when the filter button is clicked */
3732
3884
  transition-duration: 0.5s;
3733
3885
  opacity: 1; }
3734
3886
 
3735
- .react-autoql-input-container {
3736
- position: relative;
3737
- margin: 2px 5px;
3738
- display: inline-block; }
3739
- .react-autoql-input-container .react-autoql-input {
3740
- border: 1px solid rgba(0, 0, 0, 0.1);
3741
- border-radius: 4px;
3742
- line-height: 32px;
3743
- min-height: 34px;
3744
- padding: 0 10px;
3745
- width: 100%;
3746
- outline: none !important;
3747
- transition: all 0.2s ease;
3748
- transition-property: border-color, color, opacity; }
3749
- .react-autoql-input-container .react-autoql-input.with-icon {
3750
- padding-left: 38px; }
3751
- .react-autoql-input-container .react-autoql-input::-moz-placeholder {
3752
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3753
- color: rgba(0, 0, 0, 0.2);
3754
- opacity: 1;
3755
- /* Firefox */
3756
- font-style: italic; }
3757
- .react-autoql-input-container .react-autoql-input:-ms-input-placeholder {
3758
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3759
- color: rgba(0, 0, 0, 0.2);
3760
- opacity: 1;
3761
- /* Firefox */
3762
- font-style: italic; }
3763
- .react-autoql-input-container .react-autoql-input::placeholder {
3764
- /* Chrome, Firefox, Opera, Safari 10.1+ */
3765
- color: rgba(0, 0, 0, 0.2);
3766
- opacity: 1;
3767
- /* Firefox */
3768
- font-style: italic; }
3769
- .react-autoql-input-container .react-autoql-input-icon {
3770
- position: absolute;
3771
- left: 12px;
3772
- top: 8px;
3773
- opacity: 0.4;
3774
- transition: all 0.2s ease; }
3775
- .react-autoql-input-container .react-autoql-input-icon span.react-autoql-icon svg {
3776
- height: 17px;
3777
- width: 17px; }
3778
- .react-autoql-input-container:hover .react-autoql-input,
3779
- .react-autoql-input-container .react-autoql-input:focus {
3780
- border-color: var(--react-autoql-accent-color, #26a7df); }
3781
- .react-autoql-input-container:hover .react-autoql-input-icon,
3782
- .react-autoql-input-container .react-autoql-input-icon.focus {
3783
- opacity: 1;
3784
- color: var(--react-autoql-accent-color, #26a7df); }
3785
-
3786
- .react-autoql-notification-rule-container {
3787
- display: flex; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3789
- display: flex;
3790
- flex-direction: column;
3791
- flex: 1;
3792
- width: 100%; }
3793
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3794
- display: flex;
3795
- flex: 1; }
3796
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3797
- display: flex;
3798
- padding: 2px 0;
3799
- border-radius: 4px;
3800
- transition: all 0.3s ease;
3801
- flex: 1; }
3802
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3803
- flex: 0;
3804
- flex-basis: 33px; }
3805
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3806
- flex: 1;
3807
- margin-left: 4px; }
3808
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3809
- cursor: pointer;
3810
- opacity: 0.6;
3811
- padding: 6px; }
3812
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3813
- opacity: 1; }
3814
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3815
- display: none; }
3816
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3817
- margin: 0; }
3818
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3819
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3820
- + .react-autoql-rule-term-type-selector {
3821
- color: var(--react-autoql-accent-color, #26a7df);
3822
- border-color: var(--react-autoql-accent-color, #26a7df); }
3823
-
3824
- .read-only-rule-term {
3825
- display: inline-block;
3826
- border: 1px solid rgba(0, 0, 0, 0.06);
3827
- background: rgba(0, 0, 0, 0.02);
3828
- padding: 3px 7px;
3829
- line-height: 1.5em;
3830
- margin-right: 5px;
3831
- margin-bottom: 2px;
3832
- margin-top: 2px;
3833
- border-radius: 4px; }
3834
-
3835
- .expression-term-validation-error {
3836
- padding: 0 10px;
3837
- color: var(--react-autoql-warning-color); }
3838
-
3839
3887
  .notification-read-only-group {
3840
3888
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
3889
  border-radius: 4px;
@@ -3954,6 +4002,59 @@ the whole table when the filter button is clicked */
3954
4002
  opacity: 1;
3955
4003
  color: var(--react-autoql-accent-color); }
3956
4004
 
4005
+ .react-autoql-notification-rule-container {
4006
+ display: flex; }
4007
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
4008
+ display: flex;
4009
+ flex-direction: column;
4010
+ flex: 1;
4011
+ width: 100%; }
4012
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
4013
+ display: flex;
4014
+ flex: 1; }
4015
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
4016
+ display: flex;
4017
+ padding: 2px 0;
4018
+ border-radius: 4px;
4019
+ transition: all 0.3s ease;
4020
+ flex: 1; }
4021
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
4022
+ flex: 0;
4023
+ flex-basis: 33px; }
4024
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
4025
+ flex: 1;
4026
+ margin-left: 4px; }
4027
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
4028
+ cursor: pointer;
4029
+ opacity: 0.6;
4030
+ padding: 6px; }
4031
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
4032
+ opacity: 1; }
4033
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
4034
+ display: none; }
4035
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
4036
+ margin: 0; }
4037
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
4038
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
4039
+ + .react-autoql-rule-term-type-selector {
4040
+ color: var(--react-autoql-accent-color, #26a7df);
4041
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4042
+
4043
+ .read-only-rule-term {
4044
+ display: inline-block;
4045
+ border: 1px solid rgba(0, 0, 0, 0.06);
4046
+ background: rgba(0, 0, 0, 0.02);
4047
+ padding: 3px 7px;
4048
+ line-height: 1.5em;
4049
+ margin-right: 5px;
4050
+ margin-bottom: 2px;
4051
+ margin-top: 2px;
4052
+ border-radius: 4px; }
4053
+
4054
+ .expression-term-validation-error {
4055
+ padding: 0 10px;
4056
+ color: var(--react-autoql-warning-color); }
4057
+
3957
4058
  .spinner-loader {
3958
4059
  display: inline-block;
3959
4060
  width: 14px;
@@ -3984,8 +4085,6 @@ the whole table when the filter button is clicked */
3984
4085
  100% {
3985
4086
  transform: rotate(360deg); } }
3986
4087
 
3987
-
3988
-
3989
4088
  .react-autoql-select {
3990
4089
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3991
4090
  border-radius: 4px;
@@ -4024,6 +4123,8 @@ the whole table when the filter button is clicked */
4024
4123
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4025
4124
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4026
4125
 
4126
+
4127
+
4027
4128
  .slack-modal-error-container,
4028
4129
  .slack-modal-empty-list-message {
4029
4130
  display: flex;