react-autoql 3.4.4 → 3.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,3 +1,208 @@
1
+ .react-autoql-bar-container {
2
+ position: relative;
3
+ display: flex;
4
+ flex-direction: row; }
5
+
6
+ .react-autoql-chatbar-input {
7
+ padding: 10px;
8
+ padding-left: 20px;
9
+ margin: 10px;
10
+ height: 42px;
11
+ box-sizing: border-box;
12
+ border-radius: 24px;
13
+ font-size: 16px;
14
+ font-family: inherit;
15
+ letter-spacing: 0.04em;
16
+ outline: none !important;
17
+ width: calc(100% - 20px);
18
+ font-family: inherit;
19
+ /* Default styles outside of data messenger */
20
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
21
+ background: var(--react-autoql-background-color-primary);
22
+ color: #5d5d5d; }
23
+
24
+ .react-autoql-chatbar-input.left-padding {
25
+ padding-left: 54px; }
26
+
27
+ .react-autoql-chatbar-input:disabled {
28
+ background: rgba(0, 0, 0, 0.03); }
29
+
30
+ .react-autoql-chatbar-input:not(:disabled):hover {
31
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
32
+
33
+ .react-autoql-chatbar-input::-moz-placeholder {
34
+ /* Default color outside of data messenger */
35
+ color: #999 !important; }
36
+
37
+ .react-autoql-chatbar-input:-ms-input-placeholder {
38
+ /* Default color outside of data messenger */
39
+ color: #999 !important; }
40
+
41
+ .react-autoql-chatbar-input::placeholder {
42
+ /* Default color outside of data messenger */
43
+ color: #999 !important; }
44
+
45
+ /* autosuggest */
46
+ .react-autoql-bar-container .react-autosuggest__container,
47
+ .react-autoql-chatbar-input-container {
48
+ position: relative;
49
+ flex: 1; }
50
+
51
+ .react-autoql-bar-container .react-autosuggest__input--focused {
52
+ outline: none; }
53
+
54
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
+ display: none; }
56
+
57
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
+ display: none; }
59
+
60
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
61
+ position: absolute;
62
+ top: 45px;
63
+ bottom: unset;
64
+ margin: 10px;
65
+ padding-top: 5px;
66
+ padding-bottom: 5px;
67
+ display: block;
68
+ width: calc(100% - 20px);
69
+ height: unset;
70
+ border-radius: 24px;
71
+ font-family: inherit;
72
+ font-size: 15px;
73
+ font-weight: normal;
74
+ z-index: 2;
75
+ overflow: hidden;
76
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
77
+ /* Default styles outside of data messenger */
78
+ background-color: white;
79
+ color: #5d5d5d; }
80
+
81
+ .react-autoql-bar-container.autosuggest-top
82
+ .react-autosuggest__suggestions-container--open {
83
+ top: unset;
84
+ bottom: 45px; }
85
+
86
+ .react-autoql-bar-container.autosuggest-bottom
87
+ .react-autosuggest__suggestions-container--open {
88
+ top: 45px;
89
+ bottom: unset; }
90
+
91
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
92
+ margin: 0;
93
+ padding: 0;
94
+ list-style-type: none; }
95
+
96
+ /* Autocomplete styles */
97
+ .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
98
+ background-color: var(--react-autoql-background-color-primary);
99
+ border: 1px solid var(--react-autoql-border-color);
100
+ color: var(--react-autoql-text-color-primary); }
101
+
102
+ .react-autoql-bar-container .react-autosuggest__suggestion {
103
+ color: var(--react-autoql-text-color-primary); }
104
+
105
+ .react-autoql-chatbar-input {
106
+ border: 1px solid var(--react-autoql-border-color);
107
+ color: var(--react-autoql-text-color-primary); }
108
+
109
+ .react-autoql-chatbar-input::-moz-placeholder {
110
+ color: var(--react-autoql-text-color-placeholder); }
111
+
112
+ .react-autoql-chatbar-input:-ms-input-placeholder {
113
+ color: var(--react-autoql-text-color-placeholder); }
114
+
115
+ .react-autoql-chatbar-input::placeholder {
116
+ color: var(--react-autoql-text-color-placeholder); }
117
+
118
+ .react-autoql-bar-container .react-autosuggest__suggestion {
119
+ cursor: pointer;
120
+ padding: 2px;
121
+ padding-left: 18px;
122
+ letter-spacing: 0.05em;
123
+ line-height: 22.5px; }
124
+
125
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
126
+ background-color: rgba(0, 0, 0, 0.1) !important; }
127
+
128
+ .react-autoql-bar-container .react-autosuggest__section-title {
129
+ padding: 10px 0 0 10px;
130
+ font-size: 12px;
131
+ color: #777; }
132
+
133
+ .input-response-loading-container {
134
+ position: absolute;
135
+ right: 23px;
136
+ top: -2px; }
137
+
138
+ .chat-bar-input-icon {
139
+ position: absolute;
140
+ color: #28a8e0;
141
+ font-size: 20px;
142
+ left: 30px;
143
+ top: 15px; }
144
+
145
+ .react-autoql-dashboard-container {
146
+ background: var(--react-autoql-background-color-secondary);
147
+ height: 100%;
148
+ width: 100%;
149
+ overflow: hidden; }
150
+
151
+ .react-autoql-dashboard-container.edit-mode {
152
+ padding-bottom: 200px; }
153
+
154
+ .dashboard-drilldown-modal .ReactModal__Content {
155
+ top: unset !important;
156
+ margin-top: 20px !important;
157
+ max-height: 93vh !important; }
158
+
159
+ .dashboard-drilldown-modal .react-autoql-modal-body {
160
+ padding: 0; }
161
+
162
+ .dashboard-drilldown-modal .react-autoql-table {
163
+ opacity: 0.9;
164
+ font-size: 11px; }
165
+
166
+ .dashboard-drilldown-modal .splitter-layout {
167
+ height: calc(100% - 55px); }
168
+
169
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
170
+ padding: 20px;
171
+ padding-bottom: 10px; }
172
+
173
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
174
+ text-align: right;
175
+ width: 100%;
176
+ padding-right: 20px; }
177
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
178
+ position: absolute;
179
+ bottom: 5px;
180
+ width: 100px;
181
+ right: 0; }
182
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
183
+ padding-top: 10px;
184
+ margin-bottom: -8px; }
185
+
186
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
187
+ padding: 20px;
188
+ padding-top: 10px;
189
+ overflow: hidden;
190
+ height: 100%; }
191
+
192
+ .empty-dashboard-message-container {
193
+ font-family: var(--react-autoql-font-family);
194
+ color: var(--react-autoql-text-color-primary);
195
+ letter-spacing: 0.02em;
196
+ text-align: center;
197
+ padding: 100px;
198
+ height: 100%;
199
+ width: 100%; }
200
+
201
+ .empty-dashboard-new-tile-btn {
202
+ color: var(--react-autoql-accent-color);
203
+ font-weight: bold;
204
+ cursor: pointer; }
205
+
1
206
  .react-autoql-response-content-container:not(.html-content) {
2
207
  position: relative;
3
208
  display: flex;
@@ -259,35 +464,197 @@
259
464
  .context-menu-list li:hover {
260
465
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
261
466
 
262
- #condition-lock-snackbar-success {
263
- visibility: hidden;
264
- min-width: 200px;
265
- line-height: 1 !important;
266
- font-size: 14px !important;
267
- background-color: var(--react-autoql-background-color-secondary);
268
- color: var(--react-autoql-success-color);
269
- text-align: center;
270
- border-radius: 4px;
271
- padding: 6px;
272
- position: fixed;
273
- display: block;
274
- z-index: 999999999;
275
- transform: translateX(-10%);
276
- box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
277
-
278
- .autoql-condition-locking-menu-container
279
- .react-autosuggest__suggestions-container--open {
280
- transform: translateX(8%);
281
- width: 90% !important; }
467
+ .react-autoql-icon {
468
+ position: relative;
469
+ opacity: 1; }
470
+ .react-autoql-icon.warning {
471
+ color: var(--react-autoql-warning-color) !important; }
472
+ .react-autoql-icon.danger {
473
+ color: var(--react-autoql-danger-color) !important; }
282
474
 
283
- #condition-lock-snackbar-success.show {
284
- visibility: visible;
285
- -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
286
- animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
475
+ span.react-autoql-icon {
476
+ vertical-align: unset;
477
+ text-align: left;
478
+ margin: 0;
479
+ padding: 0;
480
+ float: none !important;
481
+ color: inherit; }
482
+ span.react-autoql-icon svg {
483
+ float: none !important;
484
+ color: inherit;
485
+ vertical-align: unset;
486
+ text-align: left;
487
+ margin: 0;
488
+ padding: 0;
489
+ opacity: 1;
490
+ height: 1em;
491
+ margin-bottom: -0.1em; }
287
492
 
288
- .react-autoql-drawer {
289
- font-family: var(--react-autoql-font-family), sans-serif;
290
- line-height: 22px; }
493
+ .slack-logo {
494
+ display: inline-block;
495
+ height: 100%;
496
+ margin-bottom: 3px; }
497
+ .slack-logo img {
498
+ vertical-align: middle;
499
+ height: 1em;
500
+ width: 1em; }
501
+
502
+ .react-autoql-badge {
503
+ position: absolute;
504
+ background: var(--react-autoql-warning-color);
505
+ border: 1px solid var(--react-autoql-background-color-primary);
506
+ width: 0.5em;
507
+ height: 0.5em;
508
+ top: -0.1em;
509
+ right: -0.25em;
510
+ border-radius: 50%;
511
+ box-sizing: content-box; }
512
+
513
+ .chat-voice-record-button {
514
+ width: 40px;
515
+ height: 40px;
516
+ border-radius: 24px;
517
+ margin: 10px;
518
+ margin-left: 0;
519
+ font-size: 18px;
520
+ line-height: 24px;
521
+ outline: none !important;
522
+ position: relative;
523
+ cursor: pointer;
524
+ overflow: hidden;
525
+ background: var(--react-autoql-accent-color);
526
+ color: white;
527
+ border: none;
528
+ flex-shrink: 0;
529
+ flex-grow: 0; }
530
+
531
+ .chat-voice-record-button:hover {
532
+ box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
533
+
534
+ .chat-voice-record-button.listening {
535
+ background: #ff471a; }
536
+
537
+ .chat-voice-record-icon {
538
+ vertical-align: top; }
539
+
540
+ .react-autoql-tooltip {
541
+ font-family: inherit;
542
+ letter-spacing: 0.04em;
543
+ padding: 7px 15px;
544
+ opacity: 1 !important;
545
+ z-index: 99999 !important; }
546
+
547
+ @-webkit-keyframes slide {
548
+ 0% {
549
+ transform: translateX(-100%); }
550
+ 100% {
551
+ transform: translateX(100%); } }
552
+
553
+ @keyframes slide {
554
+ 0% {
555
+ transform: translateX(-100%); }
556
+ 100% {
557
+ transform: translateX(100%); } }
558
+
559
+ @-webkit-keyframes move {
560
+ 0% {
561
+ left: 0;
562
+ opacity: 0; }
563
+ 5% {
564
+ opacity: 0; }
565
+ 48% {
566
+ opacity: 0.2; }
567
+ 80% {
568
+ opacity: 0; }
569
+ 100% {
570
+ left: 82%; } }
571
+
572
+ @keyframes move {
573
+ 0% {
574
+ left: 0;
575
+ opacity: 0; }
576
+ 5% {
577
+ opacity: 0; }
578
+ 48% {
579
+ opacity: 0.2; }
580
+ 80% {
581
+ opacity: 0; }
582
+ 100% {
583
+ left: 82%; } }
584
+
585
+ .loading-container-centered {
586
+ height: 100%;
587
+ width: 100%;
588
+ display: flex;
589
+ flex-direction: column;
590
+ justify-content: center;
591
+ align-items: center; }
592
+
593
+ .response-loading {
594
+ display: inline-block;
595
+ position: relative;
596
+ width: 64px;
597
+ height: 64px; }
598
+
599
+ .response-loading div {
600
+ position: absolute;
601
+ top: 27px;
602
+ width: 11px;
603
+ height: 11px;
604
+ border-radius: 50%;
605
+ background: #e2e2e2;
606
+ -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
607
+ animation-timing-function: cubic-bezier(0, 1, 1, 0); }
608
+
609
+ .response-loading div:nth-child(1) {
610
+ left: 6px;
611
+ -webkit-animation: response-loading1 0.6s infinite;
612
+ animation: response-loading1 0.6s infinite; }
613
+
614
+ .response-loading div:nth-child(2) {
615
+ left: 6px;
616
+ -webkit-animation: response-loading2 0.6s infinite;
617
+ animation: response-loading2 0.6s infinite; }
618
+
619
+ .response-loading div:nth-child(3) {
620
+ left: 26px;
621
+ -webkit-animation: response-loading2 0.6s infinite;
622
+ animation: response-loading2 0.6s infinite; }
623
+
624
+ .response-loading div:nth-child(4) {
625
+ left: 45px;
626
+ -webkit-animation: response-loading3 0.6s infinite;
627
+ animation: response-loading3 0.6s infinite; }
628
+
629
+ #condition-lock-snackbar-success {
630
+ visibility: hidden;
631
+ min-width: 200px;
632
+ line-height: 1 !important;
633
+ font-size: 14px !important;
634
+ background-color: var(--react-autoql-background-color-secondary);
635
+ color: var(--react-autoql-success-color);
636
+ text-align: center;
637
+ border-radius: 4px;
638
+ padding: 6px;
639
+ position: fixed;
640
+ display: block;
641
+ z-index: 999999999;
642
+ transform: translateX(-10%);
643
+ box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.4); }
644
+
645
+ .autoql-condition-locking-menu-container
646
+ .react-autosuggest__suggestions-container--open {
647
+ transform: translateX(8%);
648
+ width: 90% !important; }
649
+
650
+ #condition-lock-snackbar-success.show {
651
+ visibility: visible;
652
+ -webkit-animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s;
653
+ animation: snackbarFadein 0.5s, snackbarFadeout 0.5s 2.5s; }
654
+
655
+ .react-autoql-drawer {
656
+ font-family: var(--react-autoql-font-family), sans-serif;
657
+ line-height: 22px; }
291
658
 
292
659
  .react-autoql-drawer.disable-selection {
293
660
  -webkit-user-select: none;
@@ -560,6 +927,7 @@
560
927
  .react-autoql-drawer-tooltip {
561
928
  font-family: var(--react-autoql-font-family), sans-serif;
562
929
  letter-spacing: 0.04em;
930
+ line-height: 0.9em;
563
931
  padding: 7px 15px;
564
932
  transition: none;
565
933
  opacity: 1 !important;
@@ -852,384 +1220,501 @@
852
1220
  top: 30px;
853
1221
  opacity: 0; } }
854
1222
 
855
- .react-autoql-bar-container {
1223
+ .react-autoql-dashboard .react-grid-item {
1224
+ background: var(--react-autoql-background-color-primary, #fff);
1225
+ color: var(--react-autoql-text-color-primary, #404040);
1226
+ font-family: var(--react-autoql-font-family), sans-serif;
1227
+ overflow: hidden;
1228
+ border-radius: 4px;
1229
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1230
+
1231
+ .react-autoql-dashboard-tile-inner-div {
1232
+ height: 100%;
1233
+ width: 100%;
1234
+ background: inherit;
856
1235
  position: relative;
1236
+ text-align: center;
857
1237
  display: flex;
858
- flex-direction: row; }
859
-
860
- .react-autoql-chatbar-input {
861
- padding: 10px;
862
- padding-left: 20px;
863
- margin: 10px;
864
- height: 42px;
865
- box-sizing: border-box;
866
- border-radius: 24px;
867
- font-size: 16px;
868
- font-family: inherit;
869
- letter-spacing: 0.04em;
870
- outline: none !important;
871
- width: calc(100% - 20px);
872
- font-family: inherit;
873
- /* Default styles outside of data messenger */
874
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
875
- background: var(--react-autoql-background-color-primary);
876
- color: #5d5d5d; }
877
-
878
- .react-autoql-chatbar-input.left-padding {
879
- padding-left: 54px; }
1238
+ justify-content: flex-start;
1239
+ flex-direction: column;
1240
+ align-items: center; }
880
1241
 
881
- .react-autoql-chatbar-input:disabled {
882
- background: rgba(0, 0, 0, 0.03); }
1242
+ .dashboard-data-limit-warning-icon {
1243
+ color: var(--react-autoql-warning-color) !important;
1244
+ position: absolute !important;
1245
+ bottom: 40px;
1246
+ right: 16px;
1247
+ font-size: 20px; }
883
1248
 
884
- .react-autoql-chatbar-input:not(:disabled):hover {
885
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
1249
+ .react-autoql-dashboard-tile-drag-handle {
1250
+ transition: opacity 0.3s ease;
1251
+ position: absolute;
1252
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1253
+ cursor: move;
1254
+ opacity: 0; }
1255
+ .react-autoql-dashboard-tile-drag-handle.top {
1256
+ top: 0;
1257
+ left: 0;
1258
+ width: 100%;
1259
+ height: 15px; }
1260
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1261
+ bottom: 0;
1262
+ left: 0;
1263
+ width: 100%;
1264
+ height: 15px; }
1265
+ .react-autoql-dashboard-tile-drag-handle.left {
1266
+ top: 0;
1267
+ left: 0;
1268
+ width: 15px;
1269
+ height: 100%; }
1270
+ .react-autoql-dashboard-tile-drag-handle.right {
1271
+ top: 0;
1272
+ right: 0;
1273
+ width: 15px;
1274
+ height: 100%; }
886
1275
 
887
- .react-autoql-chatbar-input::-moz-placeholder {
888
- /* Default color outside of data messenger */
889
- color: #999 !important; }
1276
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1277
+ opacity: 1; }
890
1278
 
891
- .react-autoql-chatbar-input:-ms-input-placeholder {
892
- /* Default color outside of data messenger */
893
- color: #999 !important; }
1279
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1280
+ transition: opacity 0.3s ease, color 0.3s ease;
1281
+ visibility: hidden;
1282
+ opacity: 0;
1283
+ bottom: 8px;
1284
+ right: 8px;
1285
+ z-index: 1; }
894
1286
 
895
- .react-autoql-chatbar-input::placeholder {
896
- /* Default color outside of data messenger */
897
- color: #999 !important; }
1287
+ .dashboard-tile-viz-toolbar-container {
1288
+ transition: opacity 0.3s ease, color 0.3s ease;
1289
+ color: var(--react-autoql-accent-color);
1290
+ position: absolute;
1291
+ bottom: 0;
1292
+ left: 0;
1293
+ padding: 7px;
1294
+ z-index: 1;
1295
+ opacity: 0;
1296
+ visibility: hidden; }
1297
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1298
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1299
+ position: relative;
1300
+ display: inline-block;
1301
+ background: var(--react-autoql-background-color-primary); }
1302
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1303
+ margin-right: 7px; }
1304
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1305
+ font-size: 14px; }
898
1306
 
899
- /* autosuggest */
900
- .react-autoql-bar-container .react-autosuggest__container,
901
- .react-autoql-chatbar-input-container {
902
- position: relative;
903
- flex: 1; }
1307
+ .split-view-btn {
1308
+ z-index: 1; }
904
1309
 
905
- .react-autoql-bar-container .react-autosuggest__input--focused {
906
- outline: none; }
1310
+ .split-view-query-btn {
1311
+ transition: opacity 0.3s ease, color 0.3s ease;
1312
+ color: var(--react-autoql-accent-color);
1313
+ position: absolute;
1314
+ top: 7px;
1315
+ left: 7px;
1316
+ bottom: unset;
1317
+ z-index: 1;
1318
+ visibility: hidden;
1319
+ opacity: 0; }
907
1320
 
908
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
909
- display: none; }
1321
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1322
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
1323
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1324
+ visibility: visible;
1325
+ opacity: 1; }
910
1326
 
911
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
912
- display: none; }
1327
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
1328
+ font-size: 32px;
1329
+ margin-top: -6px;
1330
+ opacity: 0.9; }
913
1331
 
914
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
915
- position: absolute;
916
- top: 45px;
917
- bottom: unset;
918
- margin: 10px;
919
- padding-top: 5px;
920
- padding-bottom: 5px;
921
- display: block;
922
- width: calc(100% - 20px);
923
- height: unset;
924
- border-radius: 24px;
925
- font-family: inherit;
926
- font-size: 15px;
927
- font-weight: normal;
928
- z-index: 2;
929
- overflow: hidden;
930
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
931
- /* Default styles outside of data messenger */
932
- background-color: white;
933
- color: #5d5d5d; }
1332
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1333
+ height: calc(100% - 47px);
1334
+ width: 100%;
1335
+ padding-top: 0;
1336
+ background: inherit; }
1337
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1338
+ opacity: 0.8; }
1339
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1340
+ height: 1px !important;
1341
+ color: var(--react-autoql-border-color);
1342
+ opacity: 0.3;
1343
+ pointer-events: none; }
1344
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1345
+ opacity: 0.9;
1346
+ color: var(--react-autoql-text-color-primary);
1347
+ font-size: 11px; }
934
1348
 
935
- .react-autoql-bar-container.autosuggest-top
936
- .react-autosuggest__suggestions-container--open {
937
- top: unset;
938
- bottom: 45px; }
1349
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1350
+ padding: 0; }
939
1351
 
940
- .react-autoql-bar-container.autosuggest-bottom
941
- .react-autosuggest__suggestions-container--open {
942
- top: 45px;
943
- bottom: unset; }
1352
+ .react-autoql-dashboard-tile-inner-div
1353
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
1354
+ display: block;
1355
+ pointer-events: unset;
1356
+ height: 4px !important;
1357
+ color: var(--react-autoql-text-color-primary);
1358
+ opacity: 0.8; }
944
1359
 
945
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
946
- margin: 0;
947
- padding: 0;
948
- list-style-type: none; }
1360
+ /* Safetynet styles specific to dashboard tiles */
1361
+ .react-autoql-dashboard-tile-inner-div
1362
+ .dashboard-tile-response-wrapper.editing {
1363
+ height: 100%;
1364
+ width: 100%;
1365
+ overflow-x: auto;
1366
+ overflow-y: hidden; }
949
1367
 
950
- /* Autocomplete styles */
951
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
952
- background-color: var(--react-autoql-background-color-primary);
953
- border: 1px solid var(--react-autoql-border-color);
954
- color: var(--react-autoql-text-color-primary); }
1368
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1369
+ white-space: nowrap; }
955
1370
 
956
- .react-autoql-bar-container .react-autosuggest__suggestion {
957
- color: var(--react-autoql-text-color-primary); }
1371
+ .dashboard-tile-response-wrapper.small
1372
+ .react-autoql-query-validation-description,
1373
+ .dashboard-tile-response-wrapper.small
1374
+ .react-autoql-suggestion-message-description,
1375
+ .dashboard-tile-response-wrapper.small
1376
+ .react-autoql-query-validation-execute-btn {
1377
+ display: none; }
958
1378
 
959
- .react-autoql-chatbar-input {
960
- border: 1px solid var(--react-autoql-border-color);
961
- color: var(--react-autoql-text-color-primary); }
1379
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1380
+ position: relative;
1381
+ height: 100%;
1382
+ width: 100%;
1383
+ background: inherit;
1384
+ cursor: default; }
1385
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1386
+ padding: 20px;
1387
+ padding-top: 15px;
1388
+ width: 100%; }
1389
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1390
+ padding: 7px; }
962
1391
 
963
- .react-autoql-chatbar-input::-moz-placeholder {
964
- color: var(--react-autoql-text-color-placeholder); }
1392
+ .dashboard-tile-title-container {
1393
+ width: 100%;
1394
+ text-align: left;
1395
+ padding: 19px 25px 0 25px;
1396
+ height: 47px;
1397
+ white-space: nowrap;
1398
+ overflow: hidden;
1399
+ text-overflow: ellipsis;
1400
+ flex-shrink: 0;
1401
+ flex-grow: 0; }
1402
+ .dashboard-tile-title-container .dashboard-tile-title {
1403
+ color: var(--react-autoql-accent-color, #26a7df); }
965
1404
 
966
- .react-autoql-chatbar-input:-ms-input-placeholder {
967
- color: var(--react-autoql-text-color-placeholder); }
1405
+ .dashboard-tile-title-container .dashboard-tile-title {
1406
+ font-weight: bold;
1407
+ font-size: 14px; }
968
1408
 
969
- .react-autoql-chatbar-input::placeholder {
970
- color: var(--react-autoql-text-color-placeholder); }
1409
+ .dashboard-tile-edit-wrapper {
1410
+ display: flex;
1411
+ width: 100%;
1412
+ height: 55px;
1413
+ padding: 20px 20px 0 25px;
1414
+ flex-shrink: 0;
1415
+ flex-grow: 0; }
971
1416
 
972
- .react-autoql-bar-container .react-autosuggest__suggestion {
1417
+ .dashboard-tile-play-button {
1418
+ cursor: default;
1419
+ flex-grow: 0;
1420
+ flex-shrink: 0; }
1421
+
1422
+ .dashboard-tile-play-button span.react-autoql-icon svg {
973
1423
  cursor: pointer;
974
- padding: 2px;
975
- padding-left: 18px;
976
- letter-spacing: 0.05em;
977
- line-height: 22.5px; }
1424
+ width: 25px;
1425
+ height: 33px;
1426
+ margin-left: 10px;
1427
+ color: var(--react-autoql-accent-color); }
978
1428
 
979
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
980
- background-color: rgba(0, 0, 0, 0.1) !important; }
1429
+ .dashboard-tile-play-button.disabled svg {
1430
+ opacity: 0.5;
1431
+ cursor: not-allowed; }
981
1432
 
982
- .react-autoql-bar-container .react-autosuggest__section-title {
983
- padding: 10px 0 0 10px;
984
- font-size: 12px;
985
- color: #777; }
1433
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
1434
+ opacity: 0.8; }
986
1435
 
987
- .input-response-loading-container {
1436
+ .dashboard-tile-delete-button {
1437
+ opacity: 0;
1438
+ font-size: 17px;
1439
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
988
1440
  position: absolute;
989
- right: 23px;
990
- top: -2px; }
1441
+ top: 0px;
1442
+ right: 2px;
1443
+ cursor: pointer;
1444
+ transition: opacity 0.3s ease;
1445
+ z-index: 1; }
991
1446
 
992
- .chat-bar-input-icon {
993
- position: absolute;
994
- color: #28a8e0;
995
- font-size: 20px;
996
- left: 30px;
997
- top: 15px; }
1447
+ .react-grid-item:hover .dashboard-tile-delete-button {
1448
+ opacity: 1; }
998
1449
 
999
- .loading-container-centered {
1450
+ .dashboard-tile-loading-container {
1451
+ display: flex;
1000
1452
  height: 100%;
1001
1453
  width: 100%;
1002
- display: flex;
1003
- flex-direction: column;
1004
- justify-content: center;
1005
- align-items: center; }
1006
-
1007
- .response-loading {
1008
- display: inline-block;
1009
- position: relative;
1010
- width: 64px;
1011
- height: 64px; }
1454
+ padding: 20px;
1455
+ align-items: center;
1456
+ justify-content: center; }
1012
1457
 
1013
- .response-loading div {
1014
- position: absolute;
1015
- top: 27px;
1016
- width: 11px;
1017
- height: 11px;
1018
- border-radius: 50%;
1019
- background: #e2e2e2;
1020
- -webkit-animation-timing-function: cubic-bezier(0, 1, 1, 0);
1021
- animation-timing-function: cubic-bezier(0, 1, 1, 0); }
1458
+ .dashboard-tile-title-divider {
1459
+ height: 2px;
1460
+ background: currentColor;
1461
+ width: 75px;
1462
+ margin-top: 4px;
1463
+ opacity: 0.07; }
1022
1464
 
1023
- .response-loading div:nth-child(1) {
1024
- left: 6px;
1025
- -webkit-animation: response-loading1 0.6s infinite;
1026
- animation: response-loading1 0.6s infinite; }
1465
+ /* Input box styling for edit mode */
1466
+ .dashboard-tile-input-container {
1467
+ display: flex;
1468
+ width: 100%;
1469
+ height: 100%;
1470
+ font-size: 15px; }
1471
+ .dashboard-tile-input-container .dashboard-tile-input,
1472
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1473
+ width: 100%;
1474
+ height: 100%;
1475
+ padding: 12px;
1476
+ padding-left: 33px;
1477
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1478
+ outline: none !important;
1479
+ color: var(--react-autoql-text-color-primary, #356f90);
1480
+ background: var(--react-autoql-background-color-primary, #fff); }
1027
1481
 
1028
- .response-loading div:nth-child(2) {
1029
- left: 6px;
1030
- -webkit-animation: response-loading2 0.6s infinite;
1031
- animation: response-loading2 0.6s infinite; }
1482
+ .query-focused .dashboard-tile-left-input-container,
1483
+ .title-focused .dashboard-tile-right-input-container {
1484
+ width: 70%; }
1032
1485
 
1033
- .response-loading div:nth-child(3) {
1034
- left: 26px;
1035
- -webkit-animation: response-loading2 0.6s infinite;
1036
- animation: response-loading2 0.6s infinite; }
1486
+ .dashboard-tile-right-input-container {
1487
+ z-index: 2; }
1037
1488
 
1038
- .response-loading div:nth-child(4) {
1039
- left: 45px;
1040
- -webkit-animation: response-loading3 0.6s infinite;
1041
- animation: response-loading3 0.6s infinite; }
1489
+ .dashboard-tile-right-input-container,
1490
+ .dashboard-tile-left-input-container {
1491
+ position: relative;
1492
+ width: 0;
1493
+ flex-grow: 1;
1494
+ transition: width 0.3s ease; }
1495
+ .dashboard-tile-right-input-container .query-input-icon,
1496
+ .dashboard-tile-right-input-container .title-input-icon,
1497
+ .dashboard-tile-left-input-container .query-input-icon,
1498
+ .dashboard-tile-left-input-container .title-input-icon {
1499
+ color: var(--react-autoql-accent-color);
1500
+ position: absolute;
1501
+ pointer-events: none;
1502
+ z-index: 1; }
1503
+ .dashboard-tile-right-input-container .query-input-icon,
1504
+ .dashboard-tile-left-input-container .query-input-icon {
1505
+ font-size: 18px;
1506
+ top: 4px;
1507
+ left: 10px; }
1508
+ .dashboard-tile-right-input-container .title-input-icon,
1509
+ .dashboard-tile-left-input-container .title-input-icon {
1510
+ font-size: 16px;
1511
+ top: 7px;
1512
+ left: 11px; }
1042
1513
 
1043
- .chat-voice-record-button {
1044
- width: 40px;
1045
- height: 40px;
1046
- border-radius: 24px;
1047
- margin: 10px;
1048
- margin-left: 0;
1049
- font-size: 18px;
1050
- line-height: 24px;
1514
+ .dashboard-tile-input.second.query {
1515
+ transition: all 0.3s ease;
1516
+ border: 1px solid transparent;
1051
1517
  outline: none !important;
1052
- position: relative;
1053
- cursor: pointer;
1054
- overflow: hidden;
1055
- background: var(--react-autoql-accent-color);
1056
- color: white;
1057
- border: none;
1058
- flex-shrink: 0;
1059
- flex-grow: 0; }
1518
+ color: var(--react-autoql-text-color-primary, #356f90);
1519
+ background: var(--react-autoql-background-color-primary);
1520
+ margin: 0px;
1521
+ padding: 0px;
1522
+ width: 0px;
1523
+ height: 28px;
1524
+ pointer-events: none; }
1525
+ .dashboard-tile-input.second.query.open {
1526
+ width: 200px;
1527
+ padding: 12px;
1528
+ margin-left: 5px;
1529
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1530
+ pointer-events: unset; }
1060
1531
 
1061
- .chat-voice-record-button:hover {
1062
- box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.15); }
1532
+ .dashboard-tile-input:hover,
1533
+ .dashboard-tile-input:focus,
1534
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1535
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1536
+ border: 1px solid #26a7e9 !important;
1537
+ border-color: var(--react-autoql-accent-color) !important; }
1063
1538
 
1064
- .chat-voice-record-button.listening {
1065
- background: #ff471a; }
1539
+ .dashboard-tile-input-container .dashboard-tile-input.query,
1540
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1541
+ padding-left: 36px;
1542
+ border-top-left-radius: 4px;
1543
+ border-bottom-left-radius: 4px; }
1066
1544
 
1067
- .chat-voice-record-icon {
1068
- vertical-align: top; }
1545
+ .dashboard-tile-input-container .dashboard-tile-input.title {
1546
+ border-left: none;
1547
+ border-top-right-radius: 4px;
1548
+ border-bottom-right-radius: 4px;
1549
+ z-index: 2; }
1069
1550
 
1070
- .react-autoql-tooltip {
1071
- font-family: inherit;
1072
- letter-spacing: 0.04em;
1073
- padding: 7px 15px;
1074
- opacity: 1 !important;
1075
- z-index: 99999 !important; }
1551
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1552
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1553
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1554
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1555
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1556
+ margin-left: -2px; }
1076
1557
 
1077
- @-webkit-keyframes slide {
1078
- 0% {
1079
- transform: translateX(-100%); }
1080
- 100% {
1081
- transform: translateX(100%); } }
1558
+ /* Autocomplete styles */
1559
+ .dashboard-tile-input-container .react-autosuggest__container {
1560
+ position: relative;
1561
+ width: 100%;
1562
+ height: 100%;
1563
+ padding: 0;
1564
+ margin: 0; }
1082
1565
 
1083
- @keyframes slide {
1084
- 0% {
1085
- transform: translateX(-100%); }
1086
- 100% {
1087
- transform: translateX(100%); } }
1566
+ .dashboard-tile-input-container
1567
+ .react-autosuggest__suggestions-container--open {
1568
+ background-color: var(--react-autoql-background-color-primary);
1569
+ border: 1px solid var(--react-autoql-border-color);
1570
+ color: var(--react-autoql-text-color-primary); }
1088
1571
 
1089
- @-webkit-keyframes move {
1090
- 0% {
1091
- left: 0;
1092
- opacity: 0; }
1093
- 5% {
1094
- opacity: 0; }
1095
- 48% {
1096
- opacity: 0.2; }
1097
- 80% {
1098
- opacity: 0; }
1099
- 100% {
1100
- left: 82%; } }
1572
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
1573
+ color: var(--react-autoql-text-color-primary); }
1101
1574
 
1102
- @keyframes move {
1103
- 0% {
1104
- left: 0;
1105
- opacity: 0; }
1106
- 5% {
1107
- opacity: 0; }
1108
- 48% {
1109
- opacity: 0.2; }
1110
- 80% {
1111
- opacity: 0; }
1112
- 100% {
1113
- left: 82%; } }
1575
+ .dashboard-tile-input-container input::-moz-placeholder {
1576
+ opacity: 0.5; }
1114
1577
 
1115
- .react-autoql-dashboard-container {
1116
- background: var(--react-autoql-background-color-secondary);
1117
- height: 100%;
1118
- width: 100%;
1119
- overflow: hidden; }
1578
+ .dashboard-tile-input-container input:-ms-input-placeholder {
1579
+ opacity: 0.5; }
1120
1580
 
1121
- .react-autoql-dashboard-container.edit-mode {
1122
- padding-bottom: 200px; }
1581
+ .dashboard-tile-input-container input::placeholder {
1582
+ opacity: 0.5; }
1123
1583
 
1124
- .dashboard-drilldown-modal .ReactModal__Content {
1125
- top: unset !important;
1126
- margin-top: 20px !important;
1127
- max-height: 93vh !important; }
1584
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
1585
+ display: inline-block;
1586
+ line-height: 22px;
1587
+ vertical-align: middle;
1588
+ height: 23px; }
1128
1589
 
1129
- .dashboard-drilldown-modal .react-autoql-modal-body {
1130
- padding: 0; }
1590
+ .dashboard-tile-input-container
1591
+ .react-autosuggest__suggestions-container--open {
1592
+ position: absolute;
1593
+ bottom: unset;
1594
+ padding-top: 5px;
1595
+ padding-bottom: 5px;
1596
+ display: block;
1597
+ height: unset;
1598
+ border-radius: 24px;
1599
+ font-family: inherit;
1600
+ font-size: 15px;
1601
+ font-weight: normal;
1602
+ z-index: 2;
1603
+ overflow: hidden;
1604
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1605
+ text-align: left;
1606
+ width: 100%;
1607
+ top: 35px;
1608
+ border-radius: 4px;
1609
+ margin: 0; }
1131
1610
 
1132
- .dashboard-drilldown-modal .react-autoql-table {
1133
- opacity: 0.9;
1134
- font-size: 11px; }
1611
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1612
+ margin: 0;
1613
+ padding: 0;
1614
+ list-style-type: none; }
1135
1615
 
1136
- .dashboard-drilldown-modal .splitter-layout {
1137
- height: calc(100% - 55px); }
1616
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
1617
+ cursor: pointer;
1618
+ padding: 2px;
1619
+ padding-left: 18px;
1620
+ letter-spacing: 0.05em;
1621
+ line-height: 22.5px; }
1138
1622
 
1139
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1140
- padding: 20px;
1141
- padding-bottom: 10px; }
1623
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1624
+ background-color: rgba(0, 0, 0, 0.1) !important; }
1142
1625
 
1143
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1144
- text-align: right;
1145
- width: 100%;
1146
- padding-right: 20px; }
1147
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1148
- position: absolute;
1149
- bottom: 5px;
1150
- width: 100px;
1151
- right: 0; }
1152
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1153
- padding-top: 10px;
1154
- margin-bottom: -8px; }
1626
+ .dashboard-tile-input-container .react-autosuggest__section-title {
1627
+ padding: 10px 0 0 10px;
1628
+ font-size: 12px;
1629
+ color: #777; }
1155
1630
 
1156
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1157
- padding: 20px;
1158
- padding-top: 10px;
1159
- overflow: hidden;
1160
- height: 100%; }
1631
+ /* Dragging placeholder styles */
1632
+ .react-autoql-db-dragging-placeholder-container {
1633
+ height: 100%;
1634
+ width: 100%;
1635
+ padding: 20px 30px;
1636
+ display: flex;
1637
+ flex-direction: column; }
1161
1638
 
1162
- .empty-dashboard-message-container {
1163
- font-family: var(--react-autoql-font-family);
1164
- color: var(--react-autoql-text-color-primary);
1165
- letter-spacing: 0.02em;
1166
- text-align: center;
1167
- padding: 100px;
1639
+ .react-autoql-db-dragging-placeholder-title {
1640
+ width: 100%;
1641
+ height: 35px;
1642
+ background: #f3f3f3;
1643
+ border-top-right-radius: 4px;
1644
+ border-top-left-radius: 4px;
1645
+ flex-shrink: 0;
1646
+ flex-grow: 0; }
1647
+
1648
+ .react-autoql-db-dragging-placeholder-content {
1649
+ width: 100%;
1168
1650
  height: 100%;
1169
- width: 100%; }
1651
+ background: #f9f9f9;
1652
+ border-bottom-right-radius: 4px;
1653
+ border-bottom-left-radius: 4px; }
1170
1654
 
1171
- .empty-dashboard-new-tile-btn {
1172
- color: var(--react-autoql-accent-color);
1173
- font-weight: bold;
1174
- cursor: pointer; }
1655
+ .dashboard-tile-placeholder-text {
1656
+ font-size: 15px;
1657
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1658
+ .dashboard-tile-placeholder-text .play-icon {
1659
+ vertical-align: bottom;
1660
+ line-height: 20px; }
1175
1661
 
1176
- .react-autoql-icon {
1177
- position: relative;
1178
- opacity: 1; }
1179
- .react-autoql-icon.warning {
1180
- color: var(--react-autoql-warning-color) !important; }
1181
- .react-autoql-icon.danger {
1182
- color: var(--react-autoql-danger-color) !important; }
1662
+ /* React Grid Layout overrides */
1663
+ .react-grid-item > .react-resizable-handle {
1664
+ z-index: 1;
1665
+ position: absolute;
1666
+ width: 25px;
1667
+ height: 25px;
1668
+ bottom: 0;
1669
+ right: 0; }
1183
1670
 
1184
- span.react-autoql-icon {
1185
- vertical-align: unset;
1186
- text-align: left;
1187
- margin: 0;
1188
- padding: 0;
1189
- float: none !important;
1190
- color: inherit; }
1191
- span.react-autoql-icon svg {
1192
- float: none !important;
1193
- color: inherit;
1194
- vertical-align: unset;
1195
- text-align: left;
1196
- margin: 0;
1197
- padding: 0;
1198
- opacity: 1;
1199
- height: 1em;
1200
- margin-bottom: -0.1em; }
1671
+ .react-grid-item > .react-resizable-handle::after {
1672
+ width: 11px !important;
1673
+ height: 11px !important;
1674
+ bottom: 4px;
1675
+ right: 4px;
1676
+ opacity: 0;
1677
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1678
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1679
+ transition: opacity 0.3s ease; }
1201
1680
 
1202
- .slack-logo {
1203
- display: inline-block;
1204
- height: 100%;
1205
- margin-bottom: 3px; }
1206
- .slack-logo img {
1207
- vertical-align: middle;
1208
- height: 1em;
1209
- width: 1em; }
1681
+ .react-grid-item:hover > .react-resizable-handle::after {
1682
+ opacity: 1; }
1210
1683
 
1211
- .react-autoql-badge {
1212
- position: absolute;
1213
- background: var(--react-autoql-warning-color);
1214
- border: 1px solid var(--react-autoql-background-color-primary);
1215
- width: 0.5em;
1216
- height: 0.5em;
1217
- top: -0.1em;
1218
- right: -0.25em;
1219
- border-radius: 50%;
1220
- box-sizing: content-box; }
1684
+ .react-grid-placeholder {
1685
+ background: rgba(0, 0, 0, 0.13) !important; }
1221
1686
 
1222
- .notification-rule-outer-container {
1223
- position: relative;
1224
- border: 1px solid transparent;
1225
- border-radius: 4px;
1226
- padding-bottom: 5px; }
1687
+ /* This fixes the flickering bug in RGL when resizing elements */
1688
+ .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
1689
+ color: inherit; }
1690
+ .react-draggable-transparent-selection input::-moz-placeholder {
1691
+ color: inherit; }
1692
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
1693
+ color: inherit; }
1694
+ .react-draggable-transparent-selection span::selection,
1695
+ .react-draggable-transparent-selection div::selection,
1696
+ .react-draggable-transparent-selection a::selection,
1697
+ .react-draggable-transparent-selection input::selection,
1698
+ .react-draggable-transparent-selection text::selection,
1699
+ .react-draggable-transparent-selection input::placeholder {
1700
+ color: inherit; }
1227
1701
 
1228
- .expression-error-message {
1229
- padding-left: 5px; }
1702
+ .dashboard-tile-response-container .layout-pane-primary {
1703
+ overflow: hidden; }
1230
1704
 
1231
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1232
- border: none; }
1705
+ .splitter-layout,
1706
+ .layout-pane,
1707
+ .dashboard-tile-split-pane-container,
1708
+ .react-autoql-dashboard-drilldown-original {
1709
+ display: flex;
1710
+ align-items: stretch;
1711
+ justify-content: center;
1712
+ width: 100%; }
1713
+
1714
+ .dashboard-tile-response-container .splitter-layout,
1715
+ .dashboard-tile-response-container .layout-pane,
1716
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1717
+ background: inherit; }
1233
1718
 
1234
1719
  .react-autoql-notifications-button-container {
1235
1720
  position: relative;
@@ -1264,130 +1749,135 @@ span.react-autoql-icon {
1264
1749
  left: 0.5em;
1265
1750
  top: -2px; }
1266
1751
 
1267
- .notification-list-loading-container {
1268
- text-align: center;
1269
- padding-top: 100px;
1270
- color: var(--react-autoql-text-color-primary);
1271
- height: 100%;
1272
- overflow: hidden;
1273
- background: var(--react-autoql-background-color-secondary); }
1274
-
1275
- .empty-notifications-message {
1276
- color: var(--react-autoql-text-color-primary);
1277
- text-align: center;
1278
- margin-top: 75px; }
1279
- .empty-notifications-message div {
1280
- opacity: 0.6; }
1281
- .empty-notifications-message .empty-notifications-title {
1282
- font-size: 16px;
1283
- font-weight: bold;
1284
- margin-bottom: 5px; }
1285
- .empty-notifications-message .empty-notifications-img {
1286
- width: 250px;
1287
- height: 250px; }
1288
-
1289
- .react-autoql-notification-list-container {
1290
- height: 100%;
1291
- padding: 20px;
1292
- overflow-y: auto;
1293
- background: var(--react-autoql-background-color-secondary); }
1294
-
1295
- .react-autoql-notification-dismiss-all {
1296
- text-align: right;
1297
- margin-bottom: 12px;
1298
- padding-right: 10px;
1299
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1300
- transition: color 0.1s ease; }
1301
- .react-autoql-notification-dismiss-all span {
1302
- opacity: 0.8;
1303
- cursor: pointer; }
1304
- .react-autoql-notification-dismiss-all span:hover {
1305
- opacity: 1; }
1306
-
1307
- .react-autoql-notification-display-name-input {
1308
- width: 100%; }
1309
-
1310
- .react-autoql-notification-message-input {
1311
- width: 100%; }
1312
-
1313
- .react-autoql-notification-list-item:nth-of-type(0) {
1314
- -webkit-animation-delay: 0s;
1315
- animation-delay: 0s; }
1316
-
1317
- .react-autoql-notification-list-item:nth-of-type(1) {
1318
- -webkit-animation-delay: 0.1s;
1319
- animation-delay: 0.1s; }
1320
-
1321
- .react-autoql-notification-list-item:nth-of-type(2) {
1322
- -webkit-animation-delay: 0.2s;
1323
- animation-delay: 0.2s; }
1324
-
1325
- .react-autoql-notification-list-item:nth-of-type(3) {
1326
- -webkit-animation-delay: 0.3s;
1327
- animation-delay: 0.3s; }
1752
+ .notification-rule-outer-container {
1753
+ position: relative;
1754
+ border: 1px solid transparent;
1755
+ border-radius: 4px;
1756
+ padding-bottom: 5px; }
1328
1757
 
1329
- .react-autoql-notification-list-item:nth-of-type(4) {
1330
- -webkit-animation-delay: 0.4s;
1331
- animation-delay: 0.4s; }
1758
+ .expression-error-message {
1759
+ padding-left: 5px; }
1332
1760
 
1333
- .react-autoql-notification-list-item:nth-of-type(5) {
1334
- -webkit-animation-delay: 0.5s;
1335
- animation-delay: 0.5s; }
1761
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1762
+ border: none; }
1336
1763
 
1337
- .react-autoql-notification-list-item:nth-of-type(6) {
1338
- -webkit-animation-delay: 0.6s;
1339
- animation-delay: 0.6s; }
1764
+ .notification-modal-content .react-autoql-step-content p {
1765
+ margin-bottom: 0.5em;
1766
+ margin-top: 0.5em;
1767
+ padding-left: 8px; }
1340
1768
 
1341
- .react-autoql-notification-list-item:nth-of-type(7) {
1342
- -webkit-animation-delay: 0.7s;
1343
- animation-delay: 0.7s; }
1769
+ .notification-modal-content .step-btn-container {
1770
+ text-align: right;
1771
+ display: flex;
1772
+ min-height: 50px; }
1344
1773
 
1345
- .react-autoql-notification-list-item:nth-of-type(8) {
1346
- -webkit-animation-delay: 0.8s;
1347
- animation-delay: 0.8s; }
1774
+ .expression-valid-checkmark.react-autoql-icon svg {
1775
+ color: var(--react-autoql-success-color); }
1348
1776
 
1349
- .react-autoql-notification-list-item:nth-of-type(9) {
1350
- -webkit-animation-delay: 0.9s;
1351
- animation-delay: 0.9s; }
1777
+ .expression-invalid-message-container {
1778
+ max-width: 75%;
1779
+ float: left;
1780
+ text-align: left !important;
1781
+ display: flex;
1782
+ flex-direction: row;
1783
+ align-items: left;
1784
+ justify-content: left; }
1352
1785
 
1353
- .react-autoql-notification-list-item:nth-of-type(10) {
1354
- -webkit-animation-delay: 1s;
1355
- animation-delay: 1s; }
1786
+ .expression-invalid-message {
1787
+ color: var(--react-autoql-danger-color);
1788
+ display: 'inline-block'; }
1356
1789
 
1357
- @-webkit-keyframes slideIn {
1358
- 0% {
1359
- opacity: 0;
1360
- top: 500px; }
1361
- 100% {
1362
- opacity: 1;
1363
- top: 0; } }
1364
-
1365
- .react-autoql-step-container a {
1366
- color: var(--react-autoql-accent-color, #26a7df); }
1367
-
1368
- .frequency-date-select-container {
1369
- margin-top: 10px; }
1370
-
1371
- .notification-frequency-step {
1372
- display: flex; }
1373
- .notification-frequency-step .frequency-category-select {
1374
- position: relative;
1375
- padding-top: 9px; }
1376
- .notification-frequency-step .notification-frequency-select {
1377
- margin-left: 8px; }
1378
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1379
- line-height: 33px; }
1380
- .notification-frequency-step .frequency-repeat-follow-text {
1381
- line-height: 32px;
1382
- vertical-align: top; }
1383
- .notification-frequency-step .frequency-settings-container {
1384
- flex: 0 1 400px; }
1385
-
1386
- .schedule-builder-timezone-section {
1387
- margin: 10px 5px; }
1388
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1389
- display: inline-block;
1390
- width: 300px; }
1790
+ .react-autoql-notification-settings {
1791
+ background-color: var(--react-autoql-background-color-secondary);
1792
+ color: var(--react-autoql-text-color-primary);
1793
+ padding-top: 20px;
1794
+ height: 100%; }
1795
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1796
+ margin: 20px;
1797
+ margin-top: 10px;
1798
+ border-radius: 4px;
1799
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1800
+ background-color: var(--react-autoql-background-color-primary);
1801
+ overflow: hidden; }
1802
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1803
+ height: 55px;
1804
+ line-height: 55px;
1805
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1806
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1807
+ margin-right: 10px;
1808
+ cursor: pointer; }
1809
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1810
+ padding-right: 20px;
1811
+ font-size: 17px;
1812
+ opacity: 1;
1813
+ cursor: pointer;
1814
+ color: var(--react-autoql-accent-color); }
1815
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1816
+ background: rgba(0, 0, 0, 0.01); }
1817
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1818
+ opacity: 0;
1819
+ margin-right: 20px;
1820
+ font-size: 16px;
1821
+ transition: all 0.2s ease;
1822
+ color: var(--react-autoql-text-color-primary);
1823
+ cursor: pointer; }
1824
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1825
+ color: var(--react-autoql-accent-color);
1826
+ opacity: 1 !important; }
1827
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1828
+ opacity: 0.5; }
1829
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1830
+ display: flex;
1831
+ justify-content: space-between;
1832
+ height: 56px;
1833
+ padding-left: 25px;
1834
+ padding-right: 8px;
1835
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1836
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1837
+ margin-bottom: 4px;
1838
+ margin-right: 8px; }
1839
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1840
+ margin-bottom: 4px;
1841
+ margin-right: 8px;
1842
+ opacity: 0.5;
1843
+ pointer-events: none; }
1844
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1845
+ display: flex;
1846
+ justify-content: space-between;
1847
+ align-items: center;
1848
+ padding: 5px 20px;
1849
+ padding-bottom: 0;
1850
+ color: var(--react-autoql-text-color-primary); }
1851
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1852
+ display: inline-block;
1853
+ height: 35px;
1854
+ width: 35px;
1855
+ border-radius: 20px;
1856
+ background: var(--react-autoql-accent-color, #26a7df);
1857
+ color: white;
1858
+ line-height: 38px;
1859
+ text-align: center;
1860
+ font-size: 20px;
1861
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1862
+ transition: all 0.2s ease;
1863
+ margin-right: 5px;
1864
+ cursor: pointer; }
1865
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1866
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1867
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1868
+ white-space: nowrap;
1869
+ overflow: hidden;
1870
+ text-overflow: ellipsis;
1871
+ padding-right: 10px; }
1872
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1873
+ opacity: 0.5; }
1874
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1875
+ vertical-align: middle;
1876
+ height: 18px; }
1877
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1878
+ display: flex;
1879
+ align-items: center;
1880
+ margin-top: -25px; }
1391
1881
 
1392
1882
  .react-autoql-notification-list-item {
1393
1883
  display: flex;
@@ -1606,98 +2096,32 @@ span.react-autoql-icon {
1606
2096
  .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1607
2097
  margin-bottom: -1px; }
1608
2098
 
1609
- .react-autoql-notification-settings {
1610
- background-color: var(--react-autoql-background-color-secondary);
1611
- color: var(--react-autoql-text-color-primary);
1612
- padding-top: 20px;
1613
- height: 100%; }
1614
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1615
- margin: 20px;
1616
- margin-top: 10px;
1617
- border-radius: 4px;
1618
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1619
- background-color: var(--react-autoql-background-color-primary);
1620
- overflow: hidden; }
1621
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1622
- height: 55px;
1623
- line-height: 55px;
1624
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1625
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1626
- margin-right: 10px;
1627
- cursor: pointer; }
1628
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1629
- padding-right: 20px;
1630
- font-size: 17px;
1631
- opacity: 1;
1632
- cursor: pointer;
1633
- color: var(--react-autoql-accent-color); }
1634
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1635
- background: rgba(0, 0, 0, 0.01); }
1636
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1637
- opacity: 0;
1638
- margin-right: 20px;
1639
- font-size: 16px;
1640
- transition: all 0.2s ease;
1641
- color: var(--react-autoql-text-color-primary);
1642
- cursor: pointer; }
1643
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1644
- color: var(--react-autoql-accent-color);
1645
- opacity: 1 !important; }
1646
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1647
- opacity: 0.5; }
1648
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1649
- display: flex;
1650
- justify-content: space-between;
1651
- height: 56px;
1652
- padding-left: 25px;
1653
- padding-right: 8px;
1654
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1655
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1656
- margin-bottom: 4px;
1657
- margin-right: 8px; }
1658
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1659
- margin-bottom: 4px;
1660
- margin-right: 8px;
1661
- opacity: 0.5;
1662
- pointer-events: none; }
1663
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1664
- display: flex;
1665
- justify-content: space-between;
1666
- align-items: center;
1667
- padding: 5px 20px;
1668
- padding-bottom: 0;
1669
- color: var(--react-autoql-text-color-primary); }
1670
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1671
- display: inline-block;
1672
- height: 35px;
1673
- width: 35px;
1674
- border-radius: 20px;
1675
- background: var(--react-autoql-accent-color, #26a7df);
1676
- color: white;
1677
- line-height: 38px;
1678
- text-align: center;
1679
- font-size: 20px;
1680
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1681
- transition: all 0.2s ease;
1682
- margin-right: 5px;
1683
- cursor: pointer; }
1684
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1685
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1686
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1687
- white-space: nowrap;
1688
- overflow: hidden;
1689
- text-overflow: ellipsis;
1690
- padding-right: 10px; }
1691
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1692
- opacity: 0.5; }
1693
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1694
- vertical-align: middle;
1695
- margin-bottom: 4px;
1696
- height: 18px; }
1697
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1698
- display: flex;
1699
- align-items: center;
1700
- margin-top: -25px; }
2099
+ .react-autoql-step-container a {
2100
+ color: var(--react-autoql-accent-color, #26a7df); }
2101
+
2102
+ .frequency-date-select-container {
2103
+ margin-top: 10px; }
2104
+
2105
+ .notification-frequency-step {
2106
+ display: flex; }
2107
+ .notification-frequency-step .frequency-category-select {
2108
+ position: relative;
2109
+ padding-top: 9px; }
2110
+ .notification-frequency-step .notification-frequency-select {
2111
+ margin-left: 8px; }
2112
+ .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
2113
+ line-height: 33px; }
2114
+ .notification-frequency-step .frequency-repeat-follow-text {
2115
+ line-height: 32px;
2116
+ vertical-align: top; }
2117
+ .notification-frequency-step .frequency-settings-container {
2118
+ flex: 0 1 400px; }
2119
+
2120
+ .schedule-builder-timezone-section {
2121
+ margin: 10px 5px; }
2122
+ .schedule-builder-timezone-section .react-autoql-timezone-select {
2123
+ display: inline-block;
2124
+ width: 300px; }
1701
2125
 
1702
2126
  .notification-rule-add-btn-outer,
1703
2127
  .notification-rule-validate-btn-outer {
@@ -1729,797 +2153,227 @@ span.react-autoql-icon {
1729
2153
  .data-alerts-container.read-only .react-autoql-notification-group-container {
1730
2154
  border: none; }
1731
2155
 
1732
- .notification-modal-content .react-autoql-step-content p {
1733
- margin-bottom: 0.5em;
1734
- margin-top: 0.5em;
1735
- padding-left: 8px; }
1736
-
1737
- .notification-modal-content .step-btn-container {
1738
- text-align: right;
1739
- display: flex;
1740
- min-height: 50px; }
2156
+ .notification-list-loading-container {
2157
+ text-align: center;
2158
+ padding-top: 100px;
2159
+ color: var(--react-autoql-text-color-primary);
2160
+ height: 100%;
2161
+ overflow: hidden;
2162
+ background: var(--react-autoql-background-color-secondary); }
1741
2163
 
1742
- .expression-valid-checkmark.react-autoql-icon svg {
1743
- color: var(--react-autoql-success-color); }
1744
-
1745
- .expression-invalid-message-container {
1746
- max-width: 75%;
1747
- float: left;
1748
- text-align: left !important;
1749
- display: flex;
1750
- flex-direction: row;
1751
- align-items: left;
1752
- justify-content: left; }
1753
-
1754
- .expression-invalid-message {
1755
- color: var(--react-autoql-danger-color);
1756
- display: 'inline-block'; }
1757
-
1758
- .react-autoql-dashboard .react-grid-item {
1759
- background: var(--react-autoql-background-color-primary, #fff);
1760
- color: var(--react-autoql-text-color-primary, #404040);
1761
- font-family: var(--react-autoql-font-family), sans-serif;
1762
- overflow: hidden;
1763
- border-radius: 4px;
1764
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
2164
+ .empty-notifications-message {
2165
+ color: var(--react-autoql-text-color-primary);
2166
+ text-align: center;
2167
+ margin-top: 75px; }
2168
+ .empty-notifications-message div {
2169
+ opacity: 0.6; }
2170
+ .empty-notifications-message .empty-notifications-title {
2171
+ font-size: 16px;
2172
+ font-weight: bold;
2173
+ margin-bottom: 5px; }
2174
+ .empty-notifications-message .empty-notifications-img {
2175
+ width: 250px;
2176
+ height: 250px; }
1765
2177
 
1766
- .react-autoql-dashboard-tile-inner-div {
2178
+ .react-autoql-notification-list-container {
1767
2179
  height: 100%;
1768
- width: 100%;
1769
- background: inherit;
1770
- position: relative;
1771
- text-align: center;
1772
- display: flex;
1773
- justify-content: flex-start;
1774
- flex-direction: column;
1775
- align-items: center; }
2180
+ padding: 20px;
2181
+ overflow-y: auto;
2182
+ background: var(--react-autoql-background-color-secondary); }
1776
2183
 
1777
- .dashboard-data-limit-warning-icon {
1778
- color: var(--react-autoql-warning-color) !important;
1779
- position: absolute !important;
1780
- bottom: 40px;
1781
- right: 16px;
1782
- font-size: 20px; }
2184
+ .react-autoql-notification-dismiss-all {
2185
+ text-align: right;
2186
+ margin-bottom: 12px;
2187
+ padding-right: 10px;
2188
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2189
+ transition: color 0.1s ease; }
2190
+ .react-autoql-notification-dismiss-all span {
2191
+ opacity: 0.8;
2192
+ cursor: pointer; }
2193
+ .react-autoql-notification-dismiss-all span:hover {
2194
+ opacity: 1; }
1783
2195
 
1784
- .react-autoql-dashboard-tile-drag-handle {
1785
- transition: opacity 0.3s ease;
1786
- position: absolute;
1787
- background-color: var(--react-autoql-border-color, #f7f7f7);
1788
- cursor: move;
1789
- opacity: 0; }
1790
- .react-autoql-dashboard-tile-drag-handle.top {
1791
- top: 0;
1792
- left: 0;
1793
- width: 100%;
1794
- height: 15px; }
1795
- .react-autoql-dashboard-tile-drag-handle.bottom {
1796
- bottom: 0;
1797
- left: 0;
1798
- width: 100%;
1799
- height: 15px; }
1800
- .react-autoql-dashboard-tile-drag-handle.left {
1801
- top: 0;
1802
- left: 0;
1803
- width: 15px;
1804
- height: 100%; }
1805
- .react-autoql-dashboard-tile-drag-handle.right {
1806
- top: 0;
1807
- right: 0;
1808
- width: 15px;
1809
- height: 100%; }
2196
+ .react-autoql-notification-display-name-input {
2197
+ width: 100%; }
1810
2198
 
1811
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1812
- opacity: 1; }
2199
+ .react-autoql-notification-message-input {
2200
+ width: 100%; }
1813
2201
 
1814
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1815
- transition: opacity 0.3s ease, color 0.3s ease;
1816
- visibility: hidden;
1817
- opacity: 0;
1818
- bottom: 8px;
1819
- right: 8px;
1820
- z-index: 1; }
2202
+ .react-autoql-notification-list-item:nth-of-type(0) {
2203
+ -webkit-animation-delay: 0s;
2204
+ animation-delay: 0s; }
1821
2205
 
1822
- .dashboard-tile-viz-toolbar-container {
1823
- transition: opacity 0.3s ease, color 0.3s ease;
1824
- color: var(--react-autoql-accent-color);
1825
- position: absolute;
1826
- bottom: 0;
1827
- left: 0;
1828
- padding: 7px;
1829
- z-index: 1;
1830
- opacity: 0;
1831
- visibility: hidden; }
1832
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1833
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1834
- position: relative;
1835
- display: inline-block;
1836
- background: var(--react-autoql-background-color-primary); }
1837
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1838
- margin-right: 7px; }
1839
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1840
- font-size: 14px; }
2206
+ .react-autoql-notification-list-item:nth-of-type(1) {
2207
+ -webkit-animation-delay: 0.1s;
2208
+ animation-delay: 0.1s; }
1841
2209
 
1842
- .split-view-btn {
1843
- z-index: 1; }
2210
+ .react-autoql-notification-list-item:nth-of-type(2) {
2211
+ -webkit-animation-delay: 0.2s;
2212
+ animation-delay: 0.2s; }
1844
2213
 
1845
- .split-view-query-btn {
1846
- transition: opacity 0.3s ease, color 0.3s ease;
1847
- color: var(--react-autoql-accent-color);
1848
- position: absolute;
1849
- top: 7px;
1850
- left: 7px;
1851
- bottom: unset;
1852
- z-index: 1;
1853
- visibility: hidden;
1854
- opacity: 0; }
2214
+ .react-autoql-notification-list-item:nth-of-type(3) {
2215
+ -webkit-animation-delay: 0.3s;
2216
+ animation-delay: 0.3s; }
1855
2217
 
1856
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1857
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1858
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1859
- visibility: visible;
1860
- opacity: 1; }
2218
+ .react-autoql-notification-list-item:nth-of-type(4) {
2219
+ -webkit-animation-delay: 0.4s;
2220
+ animation-delay: 0.4s; }
1861
2221
 
1862
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1863
- font-size: 32px;
1864
- margin-top: -6px;
1865
- opacity: 0.9; }
2222
+ .react-autoql-notification-list-item:nth-of-type(5) {
2223
+ -webkit-animation-delay: 0.5s;
2224
+ animation-delay: 0.5s; }
1866
2225
 
1867
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1868
- height: calc(100% - 47px);
1869
- width: 100%;
1870
- padding-top: 0;
1871
- background: inherit; }
1872
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1873
- opacity: 0.8; }
1874
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1875
- height: 1px !important;
1876
- color: var(--react-autoql-border-color);
1877
- opacity: 0.3;
1878
- pointer-events: none; }
1879
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1880
- opacity: 0.9;
1881
- color: var(--react-autoql-text-color-primary);
1882
- font-size: 11px; }
2226
+ .react-autoql-notification-list-item:nth-of-type(6) {
2227
+ -webkit-animation-delay: 0.6s;
2228
+ animation-delay: 0.6s; }
1883
2229
 
1884
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1885
- padding: 0; }
2230
+ .react-autoql-notification-list-item:nth-of-type(7) {
2231
+ -webkit-animation-delay: 0.7s;
2232
+ animation-delay: 0.7s; }
1886
2233
 
1887
- .react-autoql-dashboard-tile-inner-div
1888
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1889
- display: block;
1890
- pointer-events: unset;
1891
- height: 4px !important;
1892
- color: var(--react-autoql-text-color-primary);
1893
- opacity: 0.8; }
2234
+ .react-autoql-notification-list-item:nth-of-type(8) {
2235
+ -webkit-animation-delay: 0.8s;
2236
+ animation-delay: 0.8s; }
1894
2237
 
1895
- /* Safetynet styles specific to dashboard tiles */
1896
- .react-autoql-dashboard-tile-inner-div
1897
- .dashboard-tile-response-wrapper.editing {
1898
- height: 100%;
1899
- width: 100%;
1900
- overflow-x: auto;
1901
- overflow-y: hidden; }
2238
+ .react-autoql-notification-list-item:nth-of-type(9) {
2239
+ -webkit-animation-delay: 0.9s;
2240
+ animation-delay: 0.9s; }
1902
2241
 
1903
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1904
- white-space: nowrap; }
2242
+ .react-autoql-notification-list-item:nth-of-type(10) {
2243
+ -webkit-animation-delay: 1s;
2244
+ animation-delay: 1s; }
1905
2245
 
1906
- .dashboard-tile-response-wrapper.small
1907
- .react-autoql-query-validation-description,
1908
- .dashboard-tile-response-wrapper.small
1909
- .react-autoql-suggestion-message-description,
1910
- .dashboard-tile-response-wrapper.small
1911
- .react-autoql-query-validation-execute-btn {
1912
- display: none; }
2246
+ @-webkit-keyframes slideIn {
2247
+ 0% {
2248
+ opacity: 0;
2249
+ top: 500px; }
2250
+ 100% {
2251
+ opacity: 1;
2252
+ top: 0; } }
1913
2253
 
1914
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1915
- position: relative;
1916
- height: 100%;
1917
- width: 100%;
1918
- background: inherit;
1919
- cursor: default; }
1920
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1921
- padding: 20px;
1922
- padding-top: 15px;
1923
- width: 100%; }
1924
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1925
- padding: 7px; }
2254
+ .ReactModal__Overlay {
2255
+ background-color: transparent !important;
2256
+ transition: background-color 0.2s ease-in-out;
2257
+ z-index: 9999; }
1926
2258
 
1927
- .dashboard-tile-title-container {
1928
- width: 100%;
1929
- text-align: left;
1930
- padding: 19px 25px 0 25px;
1931
- height: 47px;
1932
- white-space: nowrap;
1933
- overflow: hidden;
1934
- text-overflow: ellipsis;
1935
- flex-shrink: 0;
1936
- flex-grow: 0; }
1937
- .dashboard-tile-title-container .dashboard-tile-title {
1938
- color: var(--react-autoql-accent-color, #26a7df); }
2259
+ .ReactModal__Overlay--after-open {
2260
+ background-color: rgba(0, 0, 0, 0.25) !important; }
1939
2261
 
1940
- .dashboard-tile-title-container .dashboard-tile-title {
1941
- font-weight: bold;
1942
- font-size: 14px; }
1943
-
1944
- .dashboard-tile-edit-wrapper {
1945
- display: flex;
1946
- width: 100%;
1947
- height: 55px;
1948
- padding: 20px 20px 0 25px;
1949
- flex-shrink: 0;
1950
- flex-grow: 0; }
1951
-
1952
- .dashboard-tile-play-button {
1953
- cursor: default;
1954
- flex-grow: 0;
1955
- flex-shrink: 0; }
1956
-
1957
- .dashboard-tile-play-button span.react-autoql-icon svg {
1958
- cursor: pointer;
1959
- width: 25px;
1960
- height: 33px;
1961
- margin-left: 10px;
1962
- color: var(--react-autoql-accent-color); }
1963
-
1964
- .dashboard-tile-play-button.disabled svg {
1965
- opacity: 0.5;
1966
- cursor: not-allowed; }
1967
-
1968
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1969
- opacity: 0.8; }
1970
-
1971
- .dashboard-tile-delete-button {
1972
- opacity: 0;
1973
- font-size: 17px;
1974
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1975
- position: absolute;
1976
- top: 0px;
1977
- right: 2px;
1978
- cursor: pointer;
1979
- transition: opacity 0.3s ease;
1980
- z-index: 1; }
1981
-
1982
- .react-grid-item:hover .dashboard-tile-delete-button {
1983
- opacity: 1; }
1984
-
1985
- .dashboard-tile-loading-container {
1986
- display: flex;
1987
- height: 100%;
1988
- width: 100%;
1989
- padding: 20px;
1990
- align-items: center;
1991
- justify-content: center; }
1992
-
1993
- .dashboard-tile-title-divider {
1994
- height: 2px;
1995
- background: currentColor;
1996
- width: 75px;
1997
- margin-top: 4px;
1998
- opacity: 0.07; }
1999
-
2000
- /* Input box styling for edit mode */
2001
- .dashboard-tile-input-container {
2002
- display: flex;
2003
- width: 100%;
2004
- height: 100%;
2005
- font-size: 15px; }
2006
- .dashboard-tile-input-container .dashboard-tile-input,
2007
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2008
- width: 100%;
2009
- height: 100%;
2010
- padding: 12px;
2011
- padding-left: 33px;
2012
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2013
- outline: none !important;
2014
- color: var(--react-autoql-text-color-primary, #356f90);
2015
- background: var(--react-autoql-background-color-primary, #fff); }
2016
-
2017
- .query-focused .dashboard-tile-left-input-container,
2018
- .title-focused .dashboard-tile-right-input-container {
2019
- width: 70%; }
2020
-
2021
- .dashboard-tile-right-input-container {
2022
- z-index: 2; }
2023
-
2024
- .dashboard-tile-right-input-container,
2025
- .dashboard-tile-left-input-container {
2026
- position: relative;
2027
- width: 0;
2028
- flex-grow: 1;
2029
- transition: width 0.3s ease; }
2030
- .dashboard-tile-right-input-container .query-input-icon,
2031
- .dashboard-tile-right-input-container .title-input-icon,
2032
- .dashboard-tile-left-input-container .query-input-icon,
2033
- .dashboard-tile-left-input-container .title-input-icon {
2034
- color: var(--react-autoql-accent-color);
2035
- position: absolute;
2036
- pointer-events: none;
2037
- z-index: 1; }
2038
- .dashboard-tile-right-input-container .query-input-icon,
2039
- .dashboard-tile-left-input-container .query-input-icon {
2040
- font-size: 18px;
2041
- top: 4px;
2042
- left: 10px; }
2043
- .dashboard-tile-right-input-container .title-input-icon,
2044
- .dashboard-tile-left-input-container .title-input-icon {
2045
- font-size: 16px;
2046
- top: 7px;
2047
- left: 11px; }
2048
-
2049
- .dashboard-tile-input.second.query {
2050
- transition: all 0.3s ease;
2051
- border: 1px solid transparent;
2052
- outline: none !important;
2053
- color: var(--react-autoql-text-color-primary, #356f90);
2054
- background: var(--react-autoql-background-color-primary);
2055
- margin: 0px;
2056
- padding: 0px;
2057
- width: 0px;
2058
- height: 28px;
2059
- pointer-events: none; }
2060
- .dashboard-tile-input.second.query.open {
2061
- width: 200px;
2062
- padding: 12px;
2063
- margin-left: 5px;
2064
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2065
- pointer-events: unset; }
2066
-
2067
- .dashboard-tile-input:hover,
2068
- .dashboard-tile-input:focus,
2069
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2070
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2071
- border: 1px solid #26a7e9 !important;
2072
- border-color: var(--react-autoql-accent-color) !important; }
2073
-
2074
- .dashboard-tile-input-container .dashboard-tile-input.query,
2075
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2076
- padding-left: 36px;
2077
- border-top-left-radius: 4px;
2078
- border-bottom-left-radius: 4px; }
2079
-
2080
- .dashboard-tile-input-container .dashboard-tile-input.title {
2081
- border-left: none;
2082
- border-top-right-radius: 4px;
2083
- border-bottom-right-radius: 4px;
2084
- z-index: 2; }
2085
-
2086
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2087
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2088
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2089
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2090
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2091
- margin-left: -2px; }
2092
-
2093
- /* Autocomplete styles */
2094
- .dashboard-tile-input-container .react-autosuggest__container {
2095
- position: relative;
2096
- width: 100%;
2097
- height: 100%;
2098
- padding: 0;
2099
- margin: 0; }
2100
-
2101
- .dashboard-tile-input-container
2102
- .react-autosuggest__suggestions-container--open {
2103
- background-color: var(--react-autoql-background-color-primary);
2104
- border: 1px solid var(--react-autoql-border-color);
2105
- color: var(--react-autoql-text-color-primary); }
2106
-
2107
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2108
- color: var(--react-autoql-text-color-primary); }
2109
-
2110
- .dashboard-tile-input-container input::-moz-placeholder {
2111
- opacity: 0.5; }
2112
-
2113
- .dashboard-tile-input-container input:-ms-input-placeholder {
2114
- opacity: 0.5; }
2115
-
2116
- .dashboard-tile-input-container input::placeholder {
2117
- opacity: 0.5; }
2118
-
2119
- .react-autoql-dashboard .edit-mode-placeholder-icon {
2120
- display: inline-block;
2121
- line-height: 22px;
2122
- vertical-align: middle;
2123
- height: 23px; }
2124
-
2125
- .dashboard-tile-input-container
2126
- .react-autosuggest__suggestions-container--open {
2127
- position: absolute;
2128
- bottom: unset;
2129
- padding-top: 5px;
2130
- padding-bottom: 5px;
2131
- display: block;
2132
- height: unset;
2133
- border-radius: 24px;
2134
- font-family: inherit;
2135
- font-size: 15px;
2136
- font-weight: normal;
2137
- z-index: 2;
2138
- overflow: hidden;
2139
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2140
- text-align: left;
2141
- width: 100%;
2142
- top: 35px;
2143
- border-radius: 4px;
2144
- margin: 0; }
2145
-
2146
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2147
- margin: 0;
2148
- padding: 0;
2149
- list-style-type: none; }
2150
-
2151
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2152
- cursor: pointer;
2153
- padding: 2px;
2154
- padding-left: 18px;
2155
- letter-spacing: 0.05em;
2156
- line-height: 22.5px; }
2157
-
2158
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2159
- background-color: rgba(0, 0, 0, 0.1) !important; }
2160
-
2161
- .dashboard-tile-input-container .react-autosuggest__section-title {
2162
- padding: 10px 0 0 10px;
2163
- font-size: 12px;
2164
- color: #777; }
2165
-
2166
- /* Dragging placeholder styles */
2167
- .react-autoql-db-dragging-placeholder-container {
2168
- height: 100%;
2169
- width: 100%;
2170
- padding: 20px 30px;
2171
- display: flex;
2172
- flex-direction: column; }
2173
-
2174
- .react-autoql-db-dragging-placeholder-title {
2175
- width: 100%;
2176
- height: 35px;
2177
- background: #f3f3f3;
2178
- border-top-right-radius: 4px;
2179
- border-top-left-radius: 4px;
2180
- flex-shrink: 0;
2181
- flex-grow: 0; }
2182
-
2183
- .react-autoql-db-dragging-placeholder-content {
2184
- width: 100%;
2185
- height: 100%;
2186
- background: #f9f9f9;
2187
- border-bottom-right-radius: 4px;
2188
- border-bottom-left-radius: 4px; }
2189
-
2190
- .dashboard-tile-placeholder-text {
2191
- font-size: 15px;
2192
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2193
- .dashboard-tile-placeholder-text .play-icon {
2194
- vertical-align: bottom;
2195
- line-height: 20px; }
2196
-
2197
- /* React Grid Layout overrides */
2198
- .react-grid-item > .react-resizable-handle {
2199
- z-index: 1;
2200
- position: absolute;
2201
- width: 25px;
2202
- height: 25px;
2203
- bottom: 0;
2204
- right: 0; }
2205
-
2206
- .react-grid-item > .react-resizable-handle::after {
2207
- width: 11px !important;
2208
- height: 11px !important;
2209
- bottom: 4px;
2210
- right: 4px;
2211
- opacity: 0;
2212
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2213
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2214
- transition: opacity 0.3s ease; }
2215
-
2216
- .react-grid-item:hover > .react-resizable-handle::after {
2217
- opacity: 1; }
2218
-
2219
- .react-grid-placeholder {
2220
- background: rgba(0, 0, 0, 0.13) !important; }
2221
-
2222
- /* This fixes the flickering bug in RGL when resizing elements */
2223
- .react-draggable-transparent-selection span::-moz-selection, .react-draggable-transparent-selection div::-moz-selection, .react-draggable-transparent-selection a::-moz-selection, .react-draggable-transparent-selection input::-moz-selection, .react-draggable-transparent-selection text::-moz-selection {
2224
- color: inherit; }
2225
- .react-draggable-transparent-selection input::-moz-placeholder {
2226
- color: inherit; }
2227
- .react-draggable-transparent-selection input:-ms-input-placeholder {
2228
- color: inherit; }
2229
- .react-draggable-transparent-selection span::selection,
2230
- .react-draggable-transparent-selection div::selection,
2231
- .react-draggable-transparent-selection a::selection,
2232
- .react-draggable-transparent-selection input::selection,
2233
- .react-draggable-transparent-selection text::selection,
2234
- .react-draggable-transparent-selection input::placeholder {
2235
- color: inherit; }
2236
-
2237
- .dashboard-tile-response-container .layout-pane-primary {
2238
- overflow: hidden; }
2239
-
2240
- .splitter-layout,
2241
- .layout-pane,
2242
- .dashboard-tile-split-pane-container,
2243
- .react-autoql-dashboard-drilldown-original {
2244
- display: flex;
2245
- align-items: stretch;
2246
- justify-content: center;
2247
- width: 100%; }
2248
-
2249
- .dashboard-tile-response-container .splitter-layout,
2250
- .dashboard-tile-response-container .layout-pane,
2251
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2252
- background: inherit; }
2253
-
2254
- .react-autoql-btn {
2255
- border-radius: 4px;
2256
- cursor: pointer;
2257
- outline: none !important;
2258
- transition: all 0.2s ease;
2259
- width: auto;
2260
- display: inline-block; }
2261
-
2262
- .react-autoql-btn.disabled {
2263
- opacity: 0.4;
2264
- cursor: not-allowed;
2265
- pointer-events: none; }
2266
-
2267
- .react-autoql-btn.small {
2268
- padding: 2px 8px;
2269
- margin: 2px 3px; }
2270
-
2271
- .react-autoql-btn.large {
2272
- padding: 5px 16px;
2273
- margin: 2px 5px; }
2262
+ .ReactModal__Overlay--before-close {
2263
+ background-color: transparent !important; }
2274
2264
 
2275
- .react-autoql-btn.default {
2276
- color: inherit;
2277
- border: 1px solid var(--react-autoql-border-color);
2278
- background: inherit; }
2279
- .react-autoql-btn.default:hover {
2280
- border-color: var(--react-autoql-accent-color);
2281
- color: var(--react-autoql-accent-color); }
2265
+ .ReactModal__Content {
2266
+ display: flex;
2267
+ flex-direction: column;
2268
+ transform: scale(0);
2269
+ transition: all 0.2s ease-in-out;
2270
+ color: var(--react-autoql-text-color-primary);
2271
+ border: 1px solid var(--react-autoql-border-color) !important;
2272
+ background: var(--react-autoql-background-color-primary) !important;
2273
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2274
+ padding: 0 !important;
2275
+ margin: auto auto;
2276
+ max-width: 90vw;
2277
+ max-height: calc(100vh - 90px); }
2278
+ .ReactModal__Content input.react-autoql-input,
2279
+ .ReactModal__Content textarea.react-autoql-input,
2280
+ .ReactModal__Content textarea {
2281
+ border-color: var(--react-autoql-border-color);
2282
+ color: var(--react-autoql-text-color-primary);
2283
+ background: var(--react-autoql-background-color-primary, white); }
2284
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2285
+ color: var(--react-autoql-text-color-placeholder); }
2286
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2287
+ color: var(--react-autoql-text-color-placeholder); }
2288
+ .ReactModal__Content input.react-autoql-input::placeholder,
2289
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2290
+ .ReactModal__Content textarea::placeholder {
2291
+ color: var(--react-autoql-text-color-placeholder); }
2282
2292
 
2283
- .react-autoql-btn.primary {
2284
- background: var(--react-autoql-accent-color);
2285
- border: 1px solid var(--react-autoql-accent-color);
2286
- color: white; }
2287
- .react-autoql-btn.primary:hover {
2288
- opacity: 0.8; }
2293
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2294
+ transform: scale(1); }
2289
2295
 
2290
- .react-autoql-btn.danger {
2291
- color: var(--react-autoql-danger-color, #ca0b00);
2292
- border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2293
- background: inherit; }
2294
- .react-autoql-btn.danger:hover {
2295
- background-color: var(--react-autoql-danger-color, #ca0b00);
2296
- color: #fff; }
2296
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2297
+ transform: scale(0); }
2297
2298
 
2298
- .react-autoql-cascader {
2299
+ .react-autoql-modal-header {
2299
2300
  position: relative;
2300
- white-space: nowrap;
2301
- overflow: hidden;
2302
- min-width: 300px; }
2303
- .react-autoql-cascader .options-container {
2304
- transition: max-width 0.3s ease;
2305
- display: inline-block;
2306
- vertical-align: top;
2307
- padding: 0 10px;
2308
- margin: 10px 0;
2309
- width: 100%;
2310
- max-width: calc(100% - 20px);
2311
- white-space: pre-wrap; }
2312
- .react-autoql-cascader .options-container.hidden {
2313
- max-width: 0; }
2314
- .react-autoql-cascader .options-container.hidden span {
2315
- white-space: nowrap; }
2316
- .react-autoql-cascader .options-container.hidden .option {
2317
- opacity: 0;
2318
- pointer-events: none; }
2319
- .react-autoql-cascader .options-container .options-title {
2320
- padding: 4px;
2321
- padding-left: 10px;
2322
- font-weight: 600; }
2323
- .react-autoql-cascader .options-container .cascader-back-arrow {
2324
- position: absolute;
2325
- cursor: pointer;
2326
- top: 15px;
2327
- left: 0; }
2328
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2329
- opacity: 0.8; }
2330
- .react-autoql-cascader .options-container .option {
2331
- cursor: pointer;
2332
- padding: 4px;
2333
- display: flex;
2334
- justify-content: space-between;
2335
- border-radius: 2px;
2336
- padding-left: 10px; }
2337
- .react-autoql-cascader .options-container .option .option-arrow {
2338
- opacity: 0.7; }
2339
- .react-autoql-cascader .options-container .option .option-execute-icon {
2340
- opacity: 0;
2341
- color: #fff;
2342
- font-size: 16px;
2343
- vertical-align: middle; }
2344
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2345
- background-color: var(--react-autoql-accent-color, #26a7df);
2346
- color: #fff; }
2347
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2348
- opacity: 1; }
2349
- .react-autoql-cascader .options-container:not(:last-child) {
2350
- border-right: 1px solid #d3d3d352; }
2351
-
2352
- .query-tips-page-container {
2353
- height: 100%;
2354
- padding: 10px; }
2355
- .query-tips-page-container .chat-bar-input-icon {
2356
- top: 20px;
2357
- left: 26px; }
2358
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2359
- padding-left: 46px; }
2360
-
2361
- .query-tips-result-container {
2362
- color: var(--react-autoql-text-color-primary);
2363
- padding: 0px 20px;
2364
2301
  text-align: center;
2365
- max-width: 550px;
2366
- margin: 0 auto; }
2367
- .query-tips-result-container .query-tip-list-container {
2368
- margin-bottom: 20px; }
2369
- .query-tips-result-container .animated-item {
2370
- -webkit-animation: fadeIn 0.3s linear;
2371
- animation: fadeIn 0.3s linear;
2372
- -webkit-animation-fill-mode: both;
2373
- animation-fill-mode: both; }
2374
- .query-tips-result-container .query-tip-item {
2375
- position: relative;
2376
- padding: 13px;
2377
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2378
- cursor: pointer; }
2379
- .query-tips-result-container .query-tip-item:first-child {
2380
- border-top: none; }
2381
- .query-tips-result-container .query-tip-item .execute-btn {
2382
- position: absolute;
2383
- right: 10px;
2384
- top: 4px;
2385
- font-size: 20px;
2386
- visibility: hidden;
2387
- opacity: 0; }
2388
- .query-tips-result-container .query-tip-item:hover {
2389
- font-weight: bold;
2390
- color: var(--react-autoql-accent-color); }
2391
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2392
- visibility: visible;
2393
- opacity: 1; }
2394
- .query-tips-result-container .query-tips-result-placeholder {
2395
- margin-top: 50px;
2396
- opacity: 0.6; }
2397
-
2398
- .chat-bar-loading-spinner {
2399
- position: absolute;
2400
- right: 20px;
2401
- top: 22px; }
2302
+ flex: 0 0 52px;
2303
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2304
+ padding: 14px 60px;
2305
+ font-size: 16px; }
2402
2306
 
2403
- #react-paginate {
2307
+ .react-autoql-modal-footer {
2404
2308
  position: relative;
2405
- background: transparent;
2406
- padding: 8px; }
2407
- #react-paginate ul {
2408
- display: inline-block;
2409
- padding-left: 0;
2410
- margin-bottom: 0; }
2411
- #react-paginate li {
2412
- display: inline-block;
2413
- color: var(--react-autoql-text-color-primary);
2414
- cursor: pointer;
2415
- margin-right: 3px;
2416
- border-radius: 5px;
2417
- margin-bottom: 0;
2418
- -webkit-user-select: none;
2419
- -moz-user-select: none;
2420
- -ms-user-select: none;
2421
- user-select: none; }
2422
- #react-paginate li:hover {
2423
- opacity: 0.7;
2424
- border-radius: 50%; }
2425
- #react-paginate li a {
2426
- display: inline-block;
2427
- color: var(--react-autoql-text-color-primary);
2428
- outline: none;
2429
- width: 28px;
2430
- height: 28px;
2431
- line-height: 28px; }
2432
- #react-paginate li.selected {
2433
- background: var(--react-autoql-accent-color);
2434
- border-radius: 50%;
2435
- outline: none; }
2436
- #react-paginate li.selected a {
2437
- color: #fff; }
2438
- #react-paginate .pagination-next.disabled,
2439
- #react-paginate .pagination-previous.disabled {
2440
- opacity: 0.5;
2441
- pointer-events: none; }
2442
- #react-paginate .pagination-previous,
2443
- #react-paginate .pagination-next {
2444
- position: absolute;
2445
- font-size: 18px; }
2446
- #react-paginate .pagination-previous a,
2447
- #react-paginate .pagination-next a {
2448
- color: var(--react-autoql-accent-color); }
2449
- #react-paginate .pagination-previous {
2450
- left: 20px; }
2451
- #react-paginate .pagination-next {
2452
- right: 20px; }
2453
-
2454
- .animated-item:nth-child(1) {
2455
- -webkit-animation-delay: 0.08s;
2456
- animation-delay: 0.08s; }
2457
-
2458
- .animated-item:nth-child(2) {
2459
- -webkit-animation-delay: 0.16s;
2460
- animation-delay: 0.16s; }
2461
-
2462
- .animated-item:nth-child(3) {
2463
- -webkit-animation-delay: 0.24s;
2464
- animation-delay: 0.24s; }
2465
-
2466
- .animated-item:nth-child(4) {
2467
- -webkit-animation-delay: 0.32s;
2468
- animation-delay: 0.32s; }
2469
-
2470
- .animated-item:nth-child(5) {
2471
- -webkit-animation-delay: 0.4s;
2472
- animation-delay: 0.4s; }
2473
-
2474
- .animated-item:nth-child(6) {
2475
- -webkit-animation-delay: 0.48s;
2476
- animation-delay: 0.48s; }
2309
+ flex: 0 0 52px;
2310
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2311
+ text-align: right;
2312
+ padding: 8px 10px; }
2477
2313
 
2478
- .animated-item:nth-child(7) {
2479
- -webkit-animation-delay: 0.56s;
2480
- animation-delay: 0.56s; }
2314
+ .react-autoql-modal-body {
2315
+ display: flex;
2316
+ flex-direction: column;
2317
+ padding: 25px;
2318
+ flex: 1;
2319
+ overflow: hidden; }
2320
+ .react-autoql-modal-body h3 {
2321
+ color: var(--react-autoql-text-color-primary); }
2481
2322
 
2482
- .animated-item:nth-child(8) {
2483
- -webkit-animation-delay: 0.64s;
2484
- animation-delay: 0.64s; }
2323
+ .react-autoql-modal-close-btn {
2324
+ position: absolute !important;
2325
+ top: 10px;
2326
+ right: 18px;
2327
+ font-size: 22px;
2328
+ opacity: 0.6 !important;
2329
+ cursor: pointer; }
2485
2330
 
2486
- .animated-item:nth-child(9) {
2487
- -webkit-animation-delay: 0.72s;
2488
- animation-delay: 0.72s; }
2331
+ .react-autoql-modal-close-btn:hover {
2332
+ opacity: 1 !important; }
2489
2333
 
2490
- .animated-item:nth-child(10) {
2491
- -webkit-animation-delay: 0.8s;
2492
- animation-delay: 0.8s; }
2334
+ .react-autoql-btn {
2335
+ border-radius: 4px;
2336
+ cursor: pointer;
2337
+ outline: none !important;
2338
+ transition: all 0.2s ease;
2339
+ width: auto;
2340
+ display: inline-block; }
2493
2341
 
2494
- .animated-item:nth-child(11) {
2495
- -webkit-animation-delay: 0.88s;
2496
- animation-delay: 0.88s; }
2342
+ .react-autoql-btn.disabled {
2343
+ opacity: 0.4;
2344
+ cursor: not-allowed;
2345
+ pointer-events: none; }
2497
2346
 
2498
- .animated-item:nth-child(12) {
2499
- -webkit-animation-delay: 0.96s;
2500
- animation-delay: 0.96s; }
2347
+ .react-autoql-btn.small {
2348
+ padding: 2px 8px;
2349
+ margin: 2px 3px; }
2501
2350
 
2502
- .animated-item:nth-child(13) {
2503
- -webkit-animation-delay: 1.04s;
2504
- animation-delay: 1.04s; }
2351
+ .react-autoql-btn.large {
2352
+ padding: 5px 16px;
2353
+ margin: 2px 5px; }
2505
2354
 
2506
- .animated-item:nth-child(14) {
2507
- -webkit-animation-delay: 1.12s;
2508
- animation-delay: 1.12s; }
2355
+ .react-autoql-btn.default {
2356
+ color: inherit;
2357
+ border: 1px solid var(--react-autoql-border-color);
2358
+ background: inherit; }
2359
+ .react-autoql-btn.default:hover {
2360
+ border-color: var(--react-autoql-accent-color);
2361
+ color: var(--react-autoql-accent-color); }
2509
2362
 
2510
- .animated-item:nth-child(15) {
2511
- -webkit-animation-delay: 1.2s;
2512
- animation-delay: 1.2s; }
2363
+ .react-autoql-btn.primary {
2364
+ background: var(--react-autoql-accent-color);
2365
+ border: 1px solid var(--react-autoql-accent-color);
2366
+ color: white; }
2367
+ .react-autoql-btn.primary:hover {
2368
+ opacity: 0.8; }
2513
2369
 
2514
- @-webkit-keyframes fadeIn {
2515
- 0% {
2516
- opacity: 0;
2517
- top: 100px; }
2518
- 75% {
2519
- opacity: 0.5;
2520
- top: 0px; }
2521
- 100% {
2522
- opacity: 1; } }
2370
+ .react-autoql-btn.danger {
2371
+ color: var(--react-autoql-danger-color, #ca0b00);
2372
+ border: 1px solid var(--react-autoql-danger-color, #ca0b00);
2373
+ background: inherit; }
2374
+ .react-autoql-btn.danger:hover {
2375
+ background-color: var(--react-autoql-danger-color, #ca0b00);
2376
+ color: #fff; }
2523
2377
 
2524
2378
  .react-autoql-table-container {
2525
2379
  height: 100%;
@@ -2634,215 +2488,61 @@ span.react-autoql-icon {
2634
2488
  .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-corner {
2635
2489
  background-color: transparent; }
2636
2490
 
2637
- .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2638
- background-color: rgba(0, 0, 0, 0.2);
2639
- border-radius: 7px;
2640
- border: 0px; }
2641
-
2642
- .react-autoql-table .tabulator-header-filter input {
2643
- border: 1px solid var(--react-autoql-border-color);
2644
- border-radius: 4px;
2645
- background: transparent;
2646
- padding: 4px 9px !important;
2647
- outline: none !important; }
2648
-
2649
- .react-autoql-table .tabulator-header-filter input:focus {
2650
- border: 1px solid #28a8e0; }
2651
-
2652
- /* These are necessary because we are always rendering the
2653
- filter (just display: none when not used) instead of re-rendering
2654
- the whole table when the filter button is clicked */
2655
- .react-autoql-table-container:not(.filtering)
2656
- .react-autoql-table
2657
- .tabulator-header-filter {
2658
- display: none; }
2659
-
2660
- .react-autoql-table-container:not(.filtering)
2661
- .react-autoql-table
2662
- .tabulator-col {
2663
- height: auto !important; }
2664
-
2665
- .tabulator-table .tabulator-row .tabulator-cell {
2666
- min-height: 38px; }
2667
-
2668
- /* Center header titles */
2669
- .react-autoql-table .tabulator-header .tabulator-col {
2670
- text-align: center !important; }
2671
-
2672
- .react-autoql-table .tabulator-header .tabulator-col-title {
2673
- padding-left: 10px !important;
2674
- padding-right: 10px !important; }
2675
-
2676
- .filter-tag {
2677
- color: #2ecc40;
2678
- border: 1px solid;
2679
- padding: 2px 4px;
2680
- border-radius: 4px;
2681
- font-weight: 400;
2682
- font-size: 10px;
2683
- margin-right: 5px;
2684
- vertical-align: top;
2685
- line-height: 21px; }
2686
-
2687
- .comparison-value-positive {
2688
- color: #2ecc40; }
2689
-
2690
- .comparison-value-negative {
2691
- color: #e80000; }
2692
-
2693
- .react-autoql-condition-locking-input {
2694
- padding: 5px;
2695
- padding-left: 20px;
2696
- margin: 10px;
2697
- height: 32px;
2698
- box-sizing: border-box;
2699
- border-radius: 24px;
2700
- font-size: 12px;
2701
- font-family: inherit;
2702
- letter-spacing: 0.04em;
2703
- outline: none !important;
2704
- width: calc(100% - 60px);
2705
- font-family: inherit;
2706
- /* Default styles outside of data messenger */
2707
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2708
- background: var(--react-autoql-background-color-primary);
2709
- color: #5d5d5d; }
2710
-
2711
- .condition-table {
2712
- min-width: 95%;
2713
- margin: 10px auto; }
2714
-
2715
- .condition-table thead {
2716
- padding-left: 10px; }
2717
-
2718
- .condition-table th {
2719
- text-align: left;
2720
- padding: 4px;
2721
- margin: 0 10px 0 10px;
2722
- font-weight: 800; }
2723
-
2724
- .react-autoql-accept-conditions-button {
2725
- text-align: right;
2726
- margin-bottom: 12px;
2727
- padding-right: 10px;
2728
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2729
- transition: color 0.1s ease; }
2730
- .react-autoql-accept-conditions-button span {
2731
- opacity: 0.8;
2732
- cursor: pointer; }
2733
- .react-autoql-accept-conditions-button span:hover {
2734
- opacity: 1; }
2735
-
2736
- .condition-table tr {
2737
- cursor: pointer; }
2738
- .condition-table tr:hover {
2739
- background: var(--react-autoql-accent-color);
2740
- color: white; }
2741
-
2742
- .condition-table td {
2743
- text-align: left;
2744
- padding: 4px;
2745
- margin: 0 10px 0 10px;
2746
- padding-left: 10px; }
2747
-
2748
- .condition-list {
2749
- padding: 0;
2750
- margin: 0 auto; }
2751
-
2752
- .condition-list-item {
2753
- cursor: pointer;
2754
- padding: 4px;
2755
- margin: 0 10px 0 10px;
2756
- display: flex;
2757
- justify-content: space-between;
2758
- border-radius: 2px;
2759
- padding-left: 10px; }
2760
- .condition-list-item:hover {
2761
- background: var(--react-autoql-accent-color);
2762
- color: white; }
2763
-
2764
- .empty-condition-list {
2765
- text-align: center;
2766
- padding: 4px;
2767
- margin: 0 20px 0 20px; }
2768
-
2769
- .autoql-close-button {
2770
- background-color: inherit;
2771
- border: none;
2772
- text-align: left;
2773
- font-size: 20px;
2774
- margin-top: -20px;
2775
- float: none !important;
2776
- color: inherit; }
2777
-
2778
- .react-tiny-popover-container {
2779
- background: var(--react-autoql-background-color-primary); }
2780
-
2781
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2782
- flex-grow: 1;
2783
- display: inline;
2784
- width: 90%;
2785
- height: 100%; }
2786
-
2787
- .autoql-condition-locking-menu-container
2788
- .react-autosuggest__suggestions-container--open {
2789
- position: absolute;
2790
- overflow-y: scroll !important;
2791
- padding-top: 5px;
2792
- padding-bottom: 5px;
2793
- display: block;
2794
- font-family: inherit;
2795
- font-size: 15px;
2796
- font-weight: normal;
2797
- z-index: 2;
2798
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2799
- text-align: left;
2800
- width: 95%;
2801
- top: 35px;
2802
- border-radius: 4px;
2803
- margin: 10px auto;
2804
- height: auto;
2805
- max-height: 50vh;
2806
- overflow-y: auto; }
2491
+ .react-autoql-table .tabulator-tableHolder:hover::-webkit-scrollbar-thumb {
2492
+ background-color: rgba(0, 0, 0, 0.2);
2493
+ border-radius: 7px;
2494
+ border: 0px; }
2807
2495
 
2808
- .autoql-condition-locking-menu-container
2809
- .react-autosuggest__suggestions-container--open {
2810
- background-color: var(--react-autoql-background-color-primary);
2496
+ .react-autoql-table .tabulator-header-filter input {
2811
2497
  border: 1px solid var(--react-autoql-border-color);
2812
- color: var(--react-autoql-text-color-primary); }
2498
+ border-radius: 4px;
2499
+ background: transparent;
2500
+ padding: 4px 9px !important;
2501
+ outline: none !important; }
2813
2502
 
2814
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2815
- color: var(--react-autoql-text-color-primary); }
2503
+ .react-autoql-table .tabulator-header-filter input:focus {
2504
+ border: 1px solid #28a8e0; }
2816
2505
 
2817
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2818
- opacity: 0.5; }
2506
+ /* These are necessary because we are always rendering the
2507
+ filter (just display: none when not used) instead of re-rendering
2508
+ the whole table when the filter button is clicked */
2509
+ .react-autoql-table-container:not(.filtering)
2510
+ .react-autoql-table
2511
+ .tabulator-header-filter {
2512
+ display: none; }
2819
2513
 
2820
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2821
- opacity: 0.5; }
2514
+ .react-autoql-table-container:not(.filtering)
2515
+ .react-autoql-table
2516
+ .tabulator-col {
2517
+ height: auto !important; }
2822
2518
 
2823
- .autoql-condition-locking-menu-container input::placeholder {
2824
- opacity: 0.5; }
2519
+ .tabulator-table .tabulator-row .tabulator-cell {
2520
+ min-height: 38px; }
2825
2521
 
2826
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2827
- margin: 0;
2828
- padding: 0;
2829
- list-style-type: none; }
2522
+ /* Center header titles */
2523
+ .react-autoql-table .tabulator-header .tabulator-col {
2524
+ text-align: center !important; }
2830
2525
 
2831
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2832
- cursor: pointer;
2833
- padding: 2px;
2834
- padding-left: 18px;
2835
- letter-spacing: 0.05em;
2836
- line-height: 22.5px; }
2526
+ .react-autoql-table .tabulator-header .tabulator-col-title {
2527
+ padding-left: 10px !important;
2528
+ padding-right: 10px !important; }
2837
2529
 
2838
- .autoql-condition-locking-menu-container
2839
- .react-autosuggest__suggestion--highlighted {
2840
- background-color: rgba(0, 0, 0, 0.1) !important; }
2530
+ .filter-tag {
2531
+ color: #2ecc40;
2532
+ border: 1px solid;
2533
+ padding: 2px 4px;
2534
+ border-radius: 4px;
2535
+ font-weight: 400;
2536
+ font-size: 10px;
2537
+ margin-right: 5px;
2538
+ vertical-align: top;
2539
+ line-height: 21px; }
2841
2540
 
2842
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2843
- padding: 10px 0 0 10px;
2844
- font-size: 12px;
2845
- color: #777; }
2541
+ .comparison-value-positive {
2542
+ color: #2ecc40; }
2543
+
2544
+ .comparison-value-negative {
2545
+ color: #e80000; }
2846
2546
 
2847
2547
  .autoql-options-toolbar {
2848
2548
  position: absolute;
@@ -2857,27 +2557,199 @@ the whole table when the filter button is clicked */
2857
2557
  .autoql-options-toolbar .react-autoql-toolbar-btn {
2858
2558
  color: var(--react-autoql-accent-color); }
2859
2559
 
2860
- .copy-sql-modal-content {
2861
- position: relative;
2862
- height: 60vh; }
2863
- .copy-sql-modal-content .copy-sql-formatted-text {
2864
- height: 100%;
2865
- width: 100%;
2866
- padding: 10px;
2867
- resize: none;
2868
- background: var(--react-autoql-background-color-secondary); }
2869
- .copy-sql-modal-content .copy-sql-btn {
2870
- color: var(--react-autoql-text-color);
2871
- background-color: var(--react-autoql-background-color-primary);
2872
- position: absolute;
2873
- top: 3px;
2874
- right: 0;
2560
+ .copy-sql-modal-content {
2561
+ position: relative;
2562
+ height: 60vh; }
2563
+ .copy-sql-modal-content .copy-sql-formatted-text {
2564
+ height: 100%;
2565
+ width: 100%;
2566
+ padding: 10px;
2567
+ resize: none;
2568
+ background: var(--react-autoql-background-color-secondary); }
2569
+ .copy-sql-modal-content .copy-sql-btn {
2570
+ color: var(--react-autoql-text-color);
2571
+ background-color: var(--react-autoql-background-color-primary);
2572
+ position: absolute;
2573
+ top: 3px;
2574
+ right: 0;
2575
+ opacity: 0;
2576
+ transition: opacity 0.3s ease; }
2577
+ .copy-sql-modal-content .sql-copied {
2578
+ color: var(--react-autoql-success-color) !important; }
2579
+ .copy-sql-modal-content:hover .copy-sql-btn {
2580
+ opacity: 1; }
2581
+
2582
+ .query-tips-page-container {
2583
+ height: 100%;
2584
+ padding: 10px; }
2585
+ .query-tips-page-container .chat-bar-input-icon {
2586
+ top: 20px;
2587
+ left: 26px; }
2588
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2589
+ padding-left: 46px; }
2590
+
2591
+ .query-tips-result-container {
2592
+ color: var(--react-autoql-text-color-primary);
2593
+ padding: 0px 20px;
2594
+ text-align: center;
2595
+ max-width: 550px;
2596
+ margin: 0 auto; }
2597
+ .query-tips-result-container .query-tip-list-container {
2598
+ margin-bottom: 20px; }
2599
+ .query-tips-result-container .animated-item {
2600
+ -webkit-animation: fadeIn 0.3s linear;
2601
+ animation: fadeIn 0.3s linear;
2602
+ -webkit-animation-fill-mode: both;
2603
+ animation-fill-mode: both; }
2604
+ .query-tips-result-container .query-tip-item {
2605
+ position: relative;
2606
+ padding: 13px;
2607
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2608
+ cursor: pointer; }
2609
+ .query-tips-result-container .query-tip-item:first-child {
2610
+ border-top: none; }
2611
+ .query-tips-result-container .query-tip-item .execute-btn {
2612
+ position: absolute;
2613
+ right: 10px;
2614
+ top: 4px;
2615
+ font-size: 20px;
2616
+ visibility: hidden;
2617
+ opacity: 0; }
2618
+ .query-tips-result-container .query-tip-item:hover {
2619
+ font-weight: bold;
2620
+ color: var(--react-autoql-accent-color); }
2621
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2622
+ visibility: visible;
2623
+ opacity: 1; }
2624
+ .query-tips-result-container .query-tips-result-placeholder {
2625
+ margin-top: 50px;
2626
+ opacity: 0.6; }
2627
+
2628
+ .chat-bar-loading-spinner {
2629
+ position: absolute;
2630
+ right: 20px;
2631
+ top: 22px; }
2632
+
2633
+ #react-paginate {
2634
+ position: relative;
2635
+ background: transparent;
2636
+ padding: 8px; }
2637
+ #react-paginate ul {
2638
+ display: inline-block;
2639
+ padding-left: 0;
2640
+ margin-bottom: 0; }
2641
+ #react-paginate li {
2642
+ display: inline-block;
2643
+ color: var(--react-autoql-text-color-primary);
2644
+ cursor: pointer;
2645
+ margin-right: 3px;
2646
+ border-radius: 5px;
2647
+ margin-bottom: 0;
2648
+ -webkit-user-select: none;
2649
+ -moz-user-select: none;
2650
+ -ms-user-select: none;
2651
+ user-select: none; }
2652
+ #react-paginate li:hover {
2653
+ opacity: 0.7;
2654
+ border-radius: 50%; }
2655
+ #react-paginate li a {
2656
+ display: inline-block;
2657
+ color: var(--react-autoql-text-color-primary);
2658
+ outline: none;
2659
+ width: 28px;
2660
+ height: 28px;
2661
+ line-height: 28px; }
2662
+ #react-paginate li.selected {
2663
+ background: var(--react-autoql-accent-color);
2664
+ border-radius: 50%;
2665
+ outline: none; }
2666
+ #react-paginate li.selected a {
2667
+ color: #fff; }
2668
+ #react-paginate .pagination-next.disabled,
2669
+ #react-paginate .pagination-previous.disabled {
2670
+ opacity: 0.5;
2671
+ pointer-events: none; }
2672
+ #react-paginate .pagination-previous,
2673
+ #react-paginate .pagination-next {
2674
+ position: absolute;
2675
+ font-size: 18px; }
2676
+ #react-paginate .pagination-previous a,
2677
+ #react-paginate .pagination-next a {
2678
+ color: var(--react-autoql-accent-color); }
2679
+ #react-paginate .pagination-previous {
2680
+ left: 20px; }
2681
+ #react-paginate .pagination-next {
2682
+ right: 20px; }
2683
+
2684
+ .animated-item:nth-child(1) {
2685
+ -webkit-animation-delay: 0.08s;
2686
+ animation-delay: 0.08s; }
2687
+
2688
+ .animated-item:nth-child(2) {
2689
+ -webkit-animation-delay: 0.16s;
2690
+ animation-delay: 0.16s; }
2691
+
2692
+ .animated-item:nth-child(3) {
2693
+ -webkit-animation-delay: 0.24s;
2694
+ animation-delay: 0.24s; }
2695
+
2696
+ .animated-item:nth-child(4) {
2697
+ -webkit-animation-delay: 0.32s;
2698
+ animation-delay: 0.32s; }
2699
+
2700
+ .animated-item:nth-child(5) {
2701
+ -webkit-animation-delay: 0.4s;
2702
+ animation-delay: 0.4s; }
2703
+
2704
+ .animated-item:nth-child(6) {
2705
+ -webkit-animation-delay: 0.48s;
2706
+ animation-delay: 0.48s; }
2707
+
2708
+ .animated-item:nth-child(7) {
2709
+ -webkit-animation-delay: 0.56s;
2710
+ animation-delay: 0.56s; }
2711
+
2712
+ .animated-item:nth-child(8) {
2713
+ -webkit-animation-delay: 0.64s;
2714
+ animation-delay: 0.64s; }
2715
+
2716
+ .animated-item:nth-child(9) {
2717
+ -webkit-animation-delay: 0.72s;
2718
+ animation-delay: 0.72s; }
2719
+
2720
+ .animated-item:nth-child(10) {
2721
+ -webkit-animation-delay: 0.8s;
2722
+ animation-delay: 0.8s; }
2723
+
2724
+ .animated-item:nth-child(11) {
2725
+ -webkit-animation-delay: 0.88s;
2726
+ animation-delay: 0.88s; }
2727
+
2728
+ .animated-item:nth-child(12) {
2729
+ -webkit-animation-delay: 0.96s;
2730
+ animation-delay: 0.96s; }
2731
+
2732
+ .animated-item:nth-child(13) {
2733
+ -webkit-animation-delay: 1.04s;
2734
+ animation-delay: 1.04s; }
2735
+
2736
+ .animated-item:nth-child(14) {
2737
+ -webkit-animation-delay: 1.12s;
2738
+ animation-delay: 1.12s; }
2739
+
2740
+ .animated-item:nth-child(15) {
2741
+ -webkit-animation-delay: 1.2s;
2742
+ animation-delay: 1.2s; }
2743
+
2744
+ @-webkit-keyframes fadeIn {
2745
+ 0% {
2875
2746
  opacity: 0;
2876
- transition: opacity 0.3s ease; }
2877
- .copy-sql-modal-content .sql-copied {
2878
- color: var(--react-autoql-success-color) !important; }
2879
- .copy-sql-modal-content:hover .copy-sql-btn {
2880
- opacity: 1; }
2747
+ top: 100px; }
2748
+ 75% {
2749
+ opacity: 0.5;
2750
+ top: 0px; }
2751
+ 100% {
2752
+ opacity: 1; } }
2881
2753
 
2882
2754
  .chat-single-message-container {
2883
2755
  transition: background-color 0.2s ease;
@@ -3101,85 +2973,213 @@ so we dont have to redraw the whole table */
3101
2973
  transform: scale(1);
3102
2974
  transform-origin: 0% 100%; } }
3103
2975
 
3104
- .ReactModal__Overlay {
3105
- background-color: transparent !important;
3106
- transition: background-color 0.2s ease-in-out;
3107
- z-index: 9999; }
2976
+ .react-autoql-cascader {
2977
+ position: relative;
2978
+ white-space: nowrap;
2979
+ overflow: hidden;
2980
+ min-width: 300px; }
2981
+ .react-autoql-cascader .options-container {
2982
+ transition: max-width 0.3s ease;
2983
+ display: inline-block;
2984
+ vertical-align: top;
2985
+ padding: 0 10px;
2986
+ margin: 10px 0;
2987
+ width: 100%;
2988
+ max-width: calc(100% - 20px);
2989
+ white-space: pre-wrap; }
2990
+ .react-autoql-cascader .options-container.hidden {
2991
+ max-width: 0; }
2992
+ .react-autoql-cascader .options-container.hidden span {
2993
+ white-space: nowrap; }
2994
+ .react-autoql-cascader .options-container.hidden .option {
2995
+ opacity: 0;
2996
+ pointer-events: none; }
2997
+ .react-autoql-cascader .options-container .options-title {
2998
+ padding: 4px;
2999
+ padding-left: 10px;
3000
+ font-weight: 600; }
3001
+ .react-autoql-cascader .options-container .cascader-back-arrow {
3002
+ position: absolute;
3003
+ cursor: pointer;
3004
+ top: 15px;
3005
+ left: 0; }
3006
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
3007
+ opacity: 0.8; }
3008
+ .react-autoql-cascader .options-container .option {
3009
+ cursor: pointer;
3010
+ padding: 4px;
3011
+ display: flex;
3012
+ justify-content: space-between;
3013
+ border-radius: 2px;
3014
+ padding-left: 10px; }
3015
+ .react-autoql-cascader .options-container .option .option-arrow {
3016
+ opacity: 0.7; }
3017
+ .react-autoql-cascader .options-container .option .option-execute-icon {
3018
+ opacity: 0;
3019
+ color: #fff;
3020
+ font-size: 16px;
3021
+ vertical-align: middle; }
3022
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
3023
+ background-color: var(--react-autoql-accent-color, #26a7df);
3024
+ color: #fff; }
3025
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
3026
+ opacity: 1; }
3027
+ .react-autoql-cascader .options-container:not(:last-child) {
3028
+ border-right: 1px solid #d3d3d352; }
3108
3029
 
3109
- .ReactModal__Overlay--after-open {
3110
- background-color: rgba(0, 0, 0, 0.25) !important; }
3030
+ .react-autoql-condition-locking-input {
3031
+ padding: 5px;
3032
+ padding-left: 20px;
3033
+ margin: 10px;
3034
+ height: 32px;
3035
+ box-sizing: border-box;
3036
+ border-radius: 24px;
3037
+ font-size: 12px;
3038
+ font-family: inherit;
3039
+ letter-spacing: 0.04em;
3040
+ outline: none !important;
3041
+ width: calc(100% - 60px);
3042
+ font-family: inherit;
3043
+ /* Default styles outside of data messenger */
3044
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3045
+ background: var(--react-autoql-background-color-primary);
3046
+ color: #5d5d5d; }
3111
3047
 
3112
- .ReactModal__Overlay--before-close {
3113
- background-color: transparent !important; }
3048
+ .condition-table {
3049
+ min-width: 95%;
3050
+ margin: 10px auto; }
3114
3051
 
3115
- .ReactModal__Content {
3116
- display: flex;
3117
- flex-direction: column;
3118
- transform: scale(0);
3119
- transition: all 0.2s ease-in-out;
3120
- color: var(--react-autoql-text-color-primary);
3121
- border: 1px solid var(--react-autoql-border-color) !important;
3122
- background: var(--react-autoql-background-color-primary) !important;
3123
- box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
3124
- padding: 0 !important;
3125
- margin: auto auto;
3126
- max-width: 90vw;
3127
- max-height: calc(100vh - 90px); }
3128
- .ReactModal__Content input.react-autoql-input,
3129
- .ReactModal__Content textarea.react-autoql-input,
3130
- .ReactModal__Content textarea {
3131
- border-color: var(--react-autoql-border-color);
3132
- color: var(--react-autoql-text-color-primary);
3133
- background: var(--react-autoql-background-color-primary, white); }
3134
- .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
3135
- color: var(--react-autoql-text-color-placeholder); }
3136
- .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
3137
- color: var(--react-autoql-text-color-placeholder); }
3138
- .ReactModal__Content input.react-autoql-input::placeholder,
3139
- .ReactModal__Content textarea.react-autoql-input::placeholder,
3140
- .ReactModal__Content textarea::placeholder {
3141
- color: var(--react-autoql-text-color-placeholder); }
3052
+ .condition-table thead {
3053
+ padding-left: 10px; }
3142
3054
 
3143
- .ReactModal__Overlay--after-open .ReactModal__Content {
3144
- transform: scale(1); }
3055
+ .condition-table th {
3056
+ text-align: left;
3057
+ padding: 4px;
3058
+ margin: 0 10px 0 10px;
3059
+ font-weight: 800; }
3145
3060
 
3146
- .ReactModal__Overlay--before-close .ReactModal__Content {
3147
- transform: scale(0); }
3061
+ .react-autoql-accept-conditions-button {
3062
+ text-align: right;
3063
+ margin-bottom: 12px;
3064
+ padding-right: 10px;
3065
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
3066
+ transition: color 0.1s ease; }
3067
+ .react-autoql-accept-conditions-button span {
3068
+ opacity: 0.8;
3069
+ cursor: pointer; }
3070
+ .react-autoql-accept-conditions-button span:hover {
3071
+ opacity: 1; }
3148
3072
 
3149
- .react-autoql-modal-header {
3150
- position: relative;
3073
+ .condition-table tr {
3074
+ cursor: pointer; }
3075
+ .condition-table tr:hover {
3076
+ background: var(--react-autoql-accent-color);
3077
+ color: white; }
3078
+
3079
+ .condition-table td {
3080
+ text-align: left;
3081
+ padding: 4px;
3082
+ margin: 0 10px 0 10px;
3083
+ padding-left: 10px; }
3084
+
3085
+ .condition-list {
3086
+ padding: 0;
3087
+ margin: 0 auto; }
3088
+
3089
+ .condition-list-item {
3090
+ cursor: pointer;
3091
+ padding: 4px;
3092
+ margin: 0 10px 0 10px;
3093
+ display: flex;
3094
+ justify-content: space-between;
3095
+ border-radius: 2px;
3096
+ padding-left: 10px; }
3097
+ .condition-list-item:hover {
3098
+ background: var(--react-autoql-accent-color);
3099
+ color: white; }
3100
+
3101
+ .empty-condition-list {
3151
3102
  text-align: center;
3152
- flex: 0 0 52px;
3153
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3154
- padding: 14px 60px;
3155
- font-size: 16px; }
3103
+ padding: 4px;
3104
+ margin: 0 20px 0 20px; }
3156
3105
 
3157
- .react-autoql-modal-footer {
3158
- position: relative;
3159
- flex: 0 0 52px;
3160
- border-top: 1px solid rgba(0, 0, 0, 0.05);
3161
- text-align: right;
3162
- padding: 8px 10px; }
3106
+ .autoql-close-button {
3107
+ background-color: inherit;
3108
+ border: none;
3109
+ text-align: left;
3110
+ font-size: 20px;
3111
+ margin-top: -20px;
3112
+ float: none !important;
3113
+ color: inherit; }
3114
+
3115
+ .react-tiny-popover-container {
3116
+ background: var(--react-autoql-background-color-primary); }
3117
+
3118
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
3119
+ flex-grow: 1;
3120
+ display: inline;
3121
+ width: 90%;
3122
+ height: 100%; }
3123
+
3124
+ .autoql-condition-locking-menu-container
3125
+ .react-autosuggest__suggestions-container--open {
3126
+ position: absolute;
3127
+ overflow-y: scroll !important;
3128
+ padding-top: 5px;
3129
+ padding-bottom: 5px;
3130
+ display: block;
3131
+ font-family: inherit;
3132
+ font-size: 15px;
3133
+ font-weight: normal;
3134
+ z-index: 2;
3135
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3136
+ text-align: left;
3137
+ width: 95%;
3138
+ top: 35px;
3139
+ border-radius: 4px;
3140
+ margin: 10px auto;
3141
+ height: auto;
3142
+ max-height: 50vh;
3143
+ overflow-y: auto; }
3144
+
3145
+ .autoql-condition-locking-menu-container
3146
+ .react-autosuggest__suggestions-container--open {
3147
+ background-color: var(--react-autoql-background-color-primary);
3148
+ border: 1px solid var(--react-autoql-border-color);
3149
+ color: var(--react-autoql-text-color-primary); }
3150
+
3151
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3152
+ color: var(--react-autoql-text-color-primary); }
3153
+
3154
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
3155
+ opacity: 0.5; }
3156
+
3157
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
3158
+ opacity: 0.5; }
3163
3159
 
3164
- .react-autoql-modal-body {
3165
- display: flex;
3166
- flex-direction: column;
3167
- padding: 25px;
3168
- flex: 1;
3169
- overflow: hidden; }
3170
- .react-autoql-modal-body h3 {
3171
- color: var(--react-autoql-text-color-primary); }
3160
+ .autoql-condition-locking-menu-container input::placeholder {
3161
+ opacity: 0.5; }
3172
3162
 
3173
- .react-autoql-modal-close-btn {
3174
- position: absolute !important;
3175
- top: 10px;
3176
- right: 18px;
3177
- font-size: 22px;
3178
- opacity: 0.6 !important;
3179
- cursor: pointer; }
3163
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
3164
+ margin: 0;
3165
+ padding: 0;
3166
+ list-style-type: none; }
3180
3167
 
3181
- .react-autoql-modal-close-btn:hover {
3182
- opacity: 1 !important; }
3168
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
3169
+ cursor: pointer;
3170
+ padding: 2px;
3171
+ padding-left: 18px;
3172
+ letter-spacing: 0.05em;
3173
+ line-height: 22.5px; }
3174
+
3175
+ .autoql-condition-locking-menu-container
3176
+ .react-autosuggest__suggestion--highlighted {
3177
+ background-color: rgba(0, 0, 0, 0.1) !important; }
3178
+
3179
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
3180
+ padding: 10px 0 0 10px;
3181
+ font-size: 12px;
3182
+ color: #777; }
3183
3183
 
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
@@ -3280,6 +3280,76 @@ so we dont have to redraw the whole table */
3280
3280
  background: var(--react-autoql-background-color-primary);
3281
3281
  padding: 5px; }
3282
3282
 
3283
+
3284
+ .react-autoql-steps-container {
3285
+ margin: 10px; }
3286
+
3287
+ .react-autoql-step-container {
3288
+ position: relative;
3289
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3290
+ margin-left: 12px;
3291
+ padding-left: 20px;
3292
+ padding-bottom: 5px;
3293
+ transition: all 0.5s ease; }
3294
+ .react-autoql-step-container.complete {
3295
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3296
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3297
+ border-color: var(--react-autoql-accent-color, #26a7df);
3298
+ background: var(--react-autoql-accent-color, #26a7df);
3299
+ color: #fff; }
3300
+ .react-autoql-step-container.error {
3301
+ border-color: var(--react-autoql-warning-color); }
3302
+ .react-autoql-step-container.error .react-autoql-step-dot {
3303
+ border-color: var(--react-autoql-warning-color);
3304
+ background: var(--react-autoql-warning-color);
3305
+ color: white; }
3306
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3307
+ pointer-events: none;
3308
+ height: 10px;
3309
+ opacity: 0;
3310
+ margin: 0; }
3311
+
3312
+ .react-autoql-step-dot {
3313
+ position: absolute;
3314
+ top: 0;
3315
+ left: -10px;
3316
+ height: 20px;
3317
+ width: 20px;
3318
+ border-radius: 15px;
3319
+ background: var(--react-autoql-background-color-primary, #fff);
3320
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3321
+ transition: all 0.5s ease;
3322
+ font-size: 10.5px;
3323
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3324
+ text-align: center; }
3325
+
3326
+ .react-autoql-step-title-container:hover {
3327
+ cursor: pointer;
3328
+ transition: color 0.2s ease;
3329
+ color: var(--react-autoql-accent-color, #26a7df); }
3330
+
3331
+ .react-autoql-step-title {
3332
+ font-weight: 500;
3333
+ font-size: 15px;
3334
+ line-height: 15px;
3335
+ padding-top: 2px; }
3336
+
3337
+ .react-autoql-step-subtitle {
3338
+ font-size: 13px;
3339
+ padding-top: 6px;
3340
+ padding-bottom: 6px;
3341
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3342
+
3343
+ .react-autoql-step-content {
3344
+ margin: 15px;
3345
+ margin-top: 0; }
3346
+
3347
+ .react-autoql-step-content-container {
3348
+ transition-timing-function: ease;
3349
+ transition-property: height, opacity, margin;
3350
+ transition-duration: 0.5s;
3351
+ opacity: 1; }
3352
+
3283
3353
  .viz-toolbar {
3284
3354
  position: absolute;
3285
3355
  background: inherit;
@@ -3311,77 +3381,6 @@ so we dont have to redraw the whole table */
3311
3381
  .react-autoql-toolbar-btn:hover {
3312
3382
  opacity: 0.7; }
3313
3383
 
3314
- .react-autoql-radio-btn-container {
3315
- display: inline-block;
3316
- border-radius: 4px; }
3317
- .react-autoql-radio-btn-container [type='radio']:checked,
3318
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3319
- position: absolute;
3320
- left: -9999px; }
3321
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3322
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3323
- position: relative;
3324
- padding-left: 28px;
3325
- cursor: pointer;
3326
- line-height: 20px;
3327
- display: inline-block; }
3328
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3329
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3330
- content: '';
3331
- position: absolute;
3332
- left: 1px;
3333
- top: 1px;
3334
- width: 18px;
3335
- height: 18px;
3336
- border: 1px solid #ddd;
3337
- border-radius: 100%;
3338
- background: #fff; }
3339
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3340
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3341
- content: '';
3342
- width: 12px;
3343
- height: 12px;
3344
- background: var(--react-autoql-accent-color, #26a7df);
3345
- position: absolute;
3346
- top: 4px;
3347
- left: 4px;
3348
- border-radius: 100%;
3349
- transition: all 0.2s ease; }
3350
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3351
- opacity: 0;
3352
- transform: scale(0); }
3353
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3354
- opacity: 1;
3355
- transform: scale(1); }
3356
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3357
- position: relative;
3358
- display: inline-block;
3359
- padding: 3px 12px;
3360
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3361
- margin-left: -1px;
3362
- transition: all 0.2s ease;
3363
- cursor: pointer; }
3364
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3365
- background-color: var(--react-autoql-accent-color, #26a7df);
3366
- border-color: var(--react-autoql-accent-color, #26a7df);
3367
- color: #fff;
3368
- z-index: 3; }
3369
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3370
- background-color: inherit;
3371
- color: var(--react-autoql-accent-color, #26a7df);
3372
- z-index: 3; }
3373
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3374
- border-color: var(--react-autoql-accent-color, #26a7df);
3375
- color: var(--react-autoql-accent-color, #26a7df);
3376
- z-index: 2; }
3377
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3378
- border-top-left-radius: 4px;
3379
- border-bottom-left-radius: 4px;
3380
- margin-left: 0; }
3381
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3382
- border-top-right-radius: 4px;
3383
- border-bottom-right-radius: 4px; }
3384
-
3385
3384
  .content {
3386
3385
  margin: 2rem; }
3387
3386
 
@@ -3490,99 +3489,29 @@ so we dont have to redraw the whole table */
3490
3489
 
3491
3490
  .react-autoql-checkbox--switch__input:checked
3492
3491
  + .react-autoql-checkbox--switch__label::after {
3493
- content: 'on'; }
3494
-
3495
- .react-autoql-checkbox--switch__input:checked::before {
3496
- right: 2px;
3497
- left: 18px;
3498
- top: 2px;
3499
- bottom: 2px; }
3500
-
3501
- .react-autoql-checkbox-label {
3502
- padding-left: 6px;
3503
- line-height: 100%; }
3504
-
3505
- .react-autoql-modal-container
3506
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3507
- .react-autoql-drawer
3508
- .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3509
- border-color: var(--react-autoql-accent-color); }
3510
-
3511
- .react-autoql-modal-container
3512
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3513
- .react-autoql-drawer
3514
- .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3515
- background: var(--react-autoql-accent-color); }
3516
-
3517
-
3518
- .react-autoql-steps-container {
3519
- margin: 10px; }
3520
-
3521
- .react-autoql-step-container {
3522
- position: relative;
3523
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3524
- margin-left: 12px;
3525
- padding-left: 20px;
3526
- padding-bottom: 5px;
3527
- transition: all 0.5s ease; }
3528
- .react-autoql-step-container.complete {
3529
- border-color: var(--react-autoql-accent-color, #26a7df); }
3530
- .react-autoql-step-container.complete .react-autoql-step-dot {
3531
- border-color: var(--react-autoql-accent-color, #26a7df);
3532
- background: var(--react-autoql-accent-color, #26a7df);
3533
- color: #fff; }
3534
- .react-autoql-step-container.error {
3535
- border-color: var(--react-autoql-warning-color); }
3536
- .react-autoql-step-container.error .react-autoql-step-dot {
3537
- border-color: var(--react-autoql-warning-color);
3538
- background: var(--react-autoql-warning-color);
3539
- color: white; }
3540
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3541
- pointer-events: none;
3542
- height: 10px;
3543
- opacity: 0;
3544
- margin: 0; }
3545
-
3546
- .react-autoql-step-dot {
3547
- position: absolute;
3548
- top: 0;
3549
- left: -10px;
3550
- height: 20px;
3551
- width: 20px;
3552
- border-radius: 15px;
3553
- background: var(--react-autoql-background-color-primary, #fff);
3554
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3555
- transition: all 0.5s ease;
3556
- font-size: 10.5px;
3557
- color: var(--react-autoql-text-color-placeholder, lightgray);
3558
- text-align: center; }
3559
-
3560
- .react-autoql-step-title-container:hover {
3561
- cursor: pointer;
3562
- transition: color 0.2s ease;
3563
- color: var(--react-autoql-accent-color, #26a7df); }
3564
-
3565
- .react-autoql-step-title {
3566
- font-weight: 500;
3567
- font-size: 15px;
3568
- line-height: 15px;
3569
- padding-top: 2px; }
3492
+ content: 'on'; }
3570
3493
 
3571
- .react-autoql-step-subtitle {
3572
- font-size: 13px;
3573
- padding-top: 6px;
3574
- padding-bottom: 6px;
3575
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3494
+ .react-autoql-checkbox--switch__input:checked::before {
3495
+ right: 2px;
3496
+ left: 18px;
3497
+ top: 2px;
3498
+ bottom: 2px; }
3576
3499
 
3577
- .react-autoql-step-content {
3578
- margin: 15px;
3579
- margin-top: 0; }
3500
+ .react-autoql-checkbox-label {
3501
+ padding-left: 6px;
3502
+ line-height: 100%; }
3580
3503
 
3581
- .react-autoql-step-content-container {
3582
- transition-timing-function: ease;
3583
- transition-property: height, opacity, margin;
3584
- transition-duration: 0.5s;
3585
- opacity: 1; }
3504
+ .react-autoql-modal-container
3505
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input),
3506
+ .react-autoql-drawer
3507
+ .react-autoql-checkbox__input:not(.react-autoql-checkbox--switch__input) {
3508
+ border-color: var(--react-autoql-accent-color); }
3509
+
3510
+ .react-autoql-modal-container
3511
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input),
3512
+ .react-autoql-drawer
3513
+ .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3514
+ background: var(--react-autoql-accent-color); }
3586
3515
 
3587
3516
  .react-autoql-input-container {
3588
3517
  position: relative;
@@ -3635,176 +3564,130 @@ so we dont have to redraw the whole table */
3635
3564
  opacity: 1;
3636
3565
  color: var(--react-autoql-accent-color, #26a7df); }
3637
3566
 
3638
- .react-autoql-notification-rule-container {
3639
- display: flex; }
3640
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3641
- display: flex;
3642
- flex-direction: column;
3643
- flex: 1;
3644
- width: 100%; }
3645
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3646
- display: flex;
3647
- flex: 1; }
3648
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3649
- display: flex;
3650
- padding: 2px 0;
3651
- border-radius: 4px;
3652
- transition: all 0.3s ease;
3653
- flex: 1; }
3654
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3655
- flex: 0;
3656
- flex-basis: 33px; }
3657
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3658
- flex: 1;
3659
- margin-left: 4px; }
3660
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3661
- cursor: pointer;
3662
- opacity: 0.6;
3663
- padding: 6px; }
3664
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3665
- opacity: 1; }
3666
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3667
- display: none; }
3668
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3669
- margin: 0; }
3670
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3671
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3672
- + .react-autoql-rule-term-type-selector {
3673
- color: var(--react-autoql-accent-color, #26a7df);
3674
- border-color: var(--react-autoql-accent-color, #26a7df); }
3675
-
3676
- .read-only-rule-term {
3567
+ .react-autoql-radio-btn-container {
3677
3568
  display: inline-block;
3678
- border: 1px solid rgba(0, 0, 0, 0.06);
3679
- background: rgba(0, 0, 0, 0.02);
3680
- padding: 3px 7px;
3681
- line-height: 1.5em;
3682
- margin-right: 5px;
3683
- margin-bottom: 2px;
3684
- margin-top: 2px;
3685
3569
  border-radius: 4px; }
3686
-
3687
- .expression-term-validation-error {
3688
- padding: 0 10px;
3689
- color: var(--react-autoql-warning-color); }
3690
-
3691
- .notification-read-only-group {
3692
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3693
- border-radius: 4px;
3694
- padding: 10px; }
3695
-
3696
- .notification-rule-add-group-btn {
3697
- display: inline-block;
3698
- height: 35px;
3699
- width: 35px;
3700
- border-radius: 20px;
3701
- background: var(--react-autoql-accent-color, #26a7df);
3702
- color: #fff;
3703
- line-height: 38px;
3704
- text-align: center;
3705
- font-size: 20px;
3706
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3707
- transition: all 0.2s ease;
3708
- margin-right: 5px;
3709
- cursor: pointer; }
3710
- .notification-rule-add-group-btn:hover {
3711
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
3712
-
3713
- .notification-group-wrapper {
3714
- position: relative;
3715
- margin-right: 0px;
3716
- margin-top: 20px;
3717
- margin-bottom: 10px; }
3718
- .notification-group-wrapper:first-of-type {
3719
- margin-top: 0; }
3720
- .notification-group-wrapper:last-of-type {
3721
- margin-bottom: 0; }
3722
- .notification-group-wrapper .notification-and-or-break {
3570
+ .react-autoql-radio-btn-container [type='radio']:checked,
3571
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3723
3572
  position: absolute;
3724
- color: rgba(0, 0, 0, 0.4);
3725
- left: -35px;
3726
- border-left: 1px dashed var(--react-autoql-border-color, rgba(0, 0, 0, 0.15)); }
3727
- .notification-group-wrapper .notification-and-or-text {
3728
- width: 41px;
3729
- z-index: 999999;
3573
+ left: -9999px; }
3574
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3575
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3576
+ position: relative;
3577
+ padding-left: 28px;
3578
+ cursor: pointer;
3579
+ line-height: 20px;
3580
+ display: inline-block; }
3581
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3582
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3583
+ content: '';
3730
3584
  position: absolute;
3731
- left: -21px;
3732
- top: -5px;
3733
- padding: 4px;
3734
- border-radius: 4px;
3735
- text-align: center;
3736
- font-size: 12px; }
3737
- .notification-group-wrapper .react-autoql-notification-group-container {
3585
+ left: 1px;
3586
+ top: 1px;
3587
+ width: 18px;
3588
+ height: 18px;
3589
+ border: 1px solid #ddd;
3590
+ border-radius: 100%;
3591
+ background: #fff; }
3592
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3593
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3594
+ content: '';
3595
+ width: 12px;
3596
+ height: 12px;
3597
+ background: var(--react-autoql-accent-color, #26a7df);
3598
+ position: absolute;
3599
+ top: 4px;
3600
+ left: 4px;
3601
+ border-radius: 100%;
3602
+ transition: all 0.2s ease; }
3603
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3604
+ opacity: 0;
3605
+ transform: scale(0); }
3606
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3607
+ opacity: 1;
3608
+ transform: scale(1); }
3609
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3738
3610
  position: relative;
3739
- padding: 20px;
3740
- padding-top: 55px;
3741
- padding-bottom: 20px;
3742
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3743
- border-radius: 4px; }
3744
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn,
3745
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3746
- position: absolute;
3747
- height: 21px;
3748
- width: 21px;
3749
- border-radius: 10px;
3750
- border: 1px solid;
3751
- line-height: 22px;
3752
- text-align: center;
3753
- background: var(--react-autoql-background-color-primary, white);
3754
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
3755
- transition: all 0.3s ease;
3756
- cursor: pointer; }
3757
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
3758
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
3759
- width: 15px;
3760
- height: 15px; }
3761
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
3762
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
3763
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
3764
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn {
3765
- bottom: -11px;
3766
- left: calc(50% - 10px); }
3767
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3768
- top: -10px;
3769
- right: -10px; }
3770
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-and-or-select {
3771
- display: block;
3772
- position: absolute;
3773
- margin: 0 auto;
3774
- padding: 0 10px;
3775
- background: inherit;
3776
- top: 16px;
3777
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.5)); }
3778
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container {
3779
- display: flex;
3780
- margin-top: 5px;
3781
- width: calc(100% - 25px); }
3782
- .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container .notification-rule-add-btn {
3783
- flex: 1;
3784
- text-align: center;
3785
- border-style: dashed;
3786
- height: 42px;
3787
- line-height: 29px;
3788
- margin-right: 0 !important;
3789
- background: inherit;
3790
- overflow: hidden; }
3791
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn {
3792
- display: inline-block;
3793
- height: 20px;
3794
- width: 20px;
3795
- border-radius: 20px;
3796
- margin-left: 5px;
3797
- line-height: 20px;
3798
- text-align: center;
3799
- font-size: 14px;
3800
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.2));
3801
- opacity: 0.5;
3802
- border: 1px solid;
3803
- transition: all 0.2s ease;
3804
- cursor: pointer; }
3805
- .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn:hover {
3806
- opacity: 1;
3807
- color: var(--react-autoql-accent-color); }
3611
+ display: inline-block;
3612
+ padding: 3px 12px;
3613
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3614
+ margin-left: -1px;
3615
+ transition: all 0.2s ease;
3616
+ cursor: pointer; }
3617
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3618
+ background-color: var(--react-autoql-accent-color, #26a7df);
3619
+ border-color: var(--react-autoql-accent-color, #26a7df);
3620
+ color: #fff;
3621
+ z-index: 3; }
3622
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3623
+ background-color: inherit;
3624
+ color: var(--react-autoql-accent-color, #26a7df);
3625
+ z-index: 3; }
3626
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3627
+ border-color: var(--react-autoql-accent-color, #26a7df);
3628
+ color: var(--react-autoql-accent-color, #26a7df);
3629
+ z-index: 2; }
3630
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3631
+ border-top-left-radius: 4px;
3632
+ border-bottom-left-radius: 4px;
3633
+ margin-left: 0; }
3634
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3635
+ border-top-right-radius: 4px;
3636
+ border-bottom-right-radius: 4px; }
3637
+
3638
+ .react-autoql-notification-rule-container {
3639
+ display: flex; }
3640
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3641
+ display: flex;
3642
+ flex-direction: column;
3643
+ flex: 1;
3644
+ width: 100%; }
3645
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3646
+ display: flex;
3647
+ flex: 1; }
3648
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3649
+ display: flex;
3650
+ padding: 2px 0;
3651
+ border-radius: 4px;
3652
+ transition: all 0.3s ease;
3653
+ flex: 1; }
3654
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3655
+ flex: 0;
3656
+ flex-basis: 33px; }
3657
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3658
+ flex: 1;
3659
+ margin-left: 4px; }
3660
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3661
+ cursor: pointer;
3662
+ opacity: 0.6;
3663
+ padding: 6px; }
3664
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3665
+ opacity: 1; }
3666
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3667
+ display: none; }
3668
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3669
+ margin: 0; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3671
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3672
+ + .react-autoql-rule-term-type-selector {
3673
+ color: var(--react-autoql-accent-color, #26a7df);
3674
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3675
+
3676
+ .read-only-rule-term {
3677
+ display: inline-block;
3678
+ border: 1px solid rgba(0, 0, 0, 0.06);
3679
+ background: rgba(0, 0, 0, 0.02);
3680
+ padding: 3px 7px;
3681
+ line-height: 1.5em;
3682
+ margin-right: 5px;
3683
+ margin-bottom: 2px;
3684
+ margin-top: 2px;
3685
+ border-radius: 4px; }
3686
+
3687
+ .expression-term-validation-error {
3688
+ padding: 0 10px;
3689
+ color: var(--react-autoql-warning-color); }
3690
+
3808
3691
 
3809
3692
  .spinner-loader {
3810
3693
  display: inline-block;
@@ -3836,45 +3719,6 @@ so we dont have to redraw the whole table */
3836
3719
  100% {
3837
3720
  transform: rotate(360deg); } }
3838
3721
 
3839
- .react-autoql-select {
3840
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
- border-radius: 4px;
3842
- background: var(--react-autoql-background-color-primary, white);
3843
- display: inline-block;
3844
- font-size: 13px;
3845
- line-height: 32px;
3846
- height: 34px;
3847
- margin: 0 3px;
3848
- padding: 0 11px;
3849
- color: var(--react-autoql-accent-color, #26a7df);
3850
- transition: all 0.2s ease;
3851
- cursor: pointer; }
3852
- .react-autoql-select:hover {
3853
- border-color: var(--react-autoql-accent-color, #26a7df); }
3854
-
3855
- .react-autoql-select-popup-container {
3856
- background: var(--react-autoql-background-color-primary, white);
3857
- padding: 10px 0;
3858
- max-height: 300px;
3859
- overflow-y: auto; }
3860
- .react-autoql-select-popup-container .react-autoql-select-option.active {
3861
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3862
- .react-autoql-select-popup-container .react-autoql-select-popup {
3863
- list-style-type: none;
3864
- width: 100%;
3865
- margin: 0;
3866
- padding: 0; }
3867
- .react-autoql-select-popup-container .react-autoql-select-popup li {
3868
- color: var(--react-autoql-text-color-primary);
3869
- width: 100%;
3870
- height: 35px;
3871
- line-height: 35px;
3872
- padding: 0 20px;
3873
- cursor: pointer; }
3874
- .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
-
3877
-
3878
3722
  .slack-modal-error-container,
3879
3723
  .slack-modal-empty-list-message {
3880
3724
  display: flex;
@@ -4020,6 +3864,162 @@ so we dont have to redraw the whole table */
4020
3864
  .slack-channel-list-container .connect-channel-btn button {
4021
3865
  width: 200px; }
4022
3866
 
3867
+ .notification-read-only-group {
3868
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3869
+ border-radius: 4px;
3870
+ padding: 10px; }
3871
+
3872
+ .notification-rule-add-group-btn {
3873
+ display: inline-block;
3874
+ height: 35px;
3875
+ width: 35px;
3876
+ border-radius: 20px;
3877
+ background: var(--react-autoql-accent-color, #26a7df);
3878
+ color: #fff;
3879
+ line-height: 38px;
3880
+ text-align: center;
3881
+ font-size: 20px;
3882
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
3883
+ transition: all 0.2s ease;
3884
+ margin-right: 5px;
3885
+ cursor: pointer; }
3886
+ .notification-rule-add-group-btn:hover {
3887
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
3888
+
3889
+ .notification-group-wrapper {
3890
+ position: relative;
3891
+ margin-right: 0px;
3892
+ margin-top: 20px;
3893
+ margin-bottom: 10px; }
3894
+ .notification-group-wrapper:first-of-type {
3895
+ margin-top: 0; }
3896
+ .notification-group-wrapper:last-of-type {
3897
+ margin-bottom: 0; }
3898
+ .notification-group-wrapper .notification-and-or-break {
3899
+ position: absolute;
3900
+ color: rgba(0, 0, 0, 0.4);
3901
+ left: -35px;
3902
+ border-left: 1px dashed var(--react-autoql-border-color, rgba(0, 0, 0, 0.15)); }
3903
+ .notification-group-wrapper .notification-and-or-text {
3904
+ width: 41px;
3905
+ z-index: 999999;
3906
+ position: absolute;
3907
+ left: -21px;
3908
+ top: -5px;
3909
+ padding: 4px;
3910
+ border-radius: 4px;
3911
+ text-align: center;
3912
+ font-size: 12px; }
3913
+ .notification-group-wrapper .react-autoql-notification-group-container {
3914
+ position: relative;
3915
+ padding: 20px;
3916
+ padding-top: 55px;
3917
+ padding-bottom: 20px;
3918
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3919
+ border-radius: 4px; }
3920
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn,
3921
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3922
+ position: absolute;
3923
+ height: 21px;
3924
+ width: 21px;
3925
+ border-radius: 10px;
3926
+ border: 1px solid;
3927
+ line-height: 22px;
3928
+ text-align: center;
3929
+ background: var(--react-autoql-background-color-primary, white);
3930
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.2));
3931
+ transition: all 0.3s ease;
3932
+ cursor: pointer; }
3933
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn span.react-autoql-icon svg,
3934
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn span.react-autoql-icon svg {
3935
+ width: 15px;
3936
+ height: 15px; }
3937
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn:hover,
3938
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn:hover {
3939
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6)); }
3940
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-add-btn {
3941
+ bottom: -11px;
3942
+ left: calc(50% - 10px); }
3943
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-group-delete-btn {
3944
+ top: -10px;
3945
+ right: -10px; }
3946
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-and-or-select {
3947
+ display: block;
3948
+ position: absolute;
3949
+ margin: 0 auto;
3950
+ padding: 0 10px;
3951
+ background: inherit;
3952
+ top: 16px;
3953
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.5)); }
3954
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container {
3955
+ display: flex;
3956
+ margin-top: 5px;
3957
+ width: calc(100% - 25px); }
3958
+ .notification-group-wrapper .react-autoql-notification-group-container .notification-rule-btn-container .notification-rule-add-btn {
3959
+ flex: 1;
3960
+ text-align: center;
3961
+ border-style: dashed;
3962
+ height: 42px;
3963
+ line-height: 29px;
3964
+ margin-right: 0 !important;
3965
+ background: inherit;
3966
+ overflow: hidden; }
3967
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn {
3968
+ display: inline-block;
3969
+ height: 20px;
3970
+ width: 20px;
3971
+ border-radius: 20px;
3972
+ margin-left: 5px;
3973
+ line-height: 20px;
3974
+ text-align: center;
3975
+ font-size: 14px;
3976
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.2));
3977
+ opacity: 0.5;
3978
+ border: 1px solid;
3979
+ transition: all 0.2s ease;
3980
+ cursor: pointer; }
3981
+ .notification-group-wrapper .react-autoql-notification-group-container .react-autoql-notification-rule-add-btn:hover {
3982
+ opacity: 1;
3983
+ color: var(--react-autoql-accent-color); }
3984
+
3985
+
3986
+ .react-autoql-select {
3987
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3988
+ border-radius: 4px;
3989
+ background: var(--react-autoql-background-color-primary, white);
3990
+ display: inline-block;
3991
+ font-size: 13px;
3992
+ line-height: 32px;
3993
+ height: 34px;
3994
+ margin: 0 3px;
3995
+ padding: 0 11px;
3996
+ color: var(--react-autoql-accent-color, #26a7df);
3997
+ transition: all 0.2s ease;
3998
+ cursor: pointer; }
3999
+ .react-autoql-select:hover {
4000
+ border-color: var(--react-autoql-accent-color, #26a7df); }
4001
+
4002
+ .react-autoql-select-popup-container {
4003
+ background: var(--react-autoql-background-color-primary, white);
4004
+ padding: 10px 0;
4005
+ max-height: 300px;
4006
+ overflow-y: auto; }
4007
+ .react-autoql-select-popup-container .react-autoql-select-option.active {
4008
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4009
+ .react-autoql-select-popup-container .react-autoql-select-popup {
4010
+ list-style-type: none;
4011
+ width: 100%;
4012
+ margin: 0;
4013
+ padding: 0; }
4014
+ .react-autoql-select-popup-container .react-autoql-select-popup li {
4015
+ color: var(--react-autoql-text-color-primary);
4016
+ width: 100%;
4017
+ height: 35px;
4018
+ line-height: 35px;
4019
+ padding: 0 20px;
4020
+ cursor: pointer; }
4021
+ .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
4022
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
4023
4023
 
4024
4024
  .react-autoql-list-item {
4025
4025
  padding: 0 20px;