react-autoql 3.4.2 → 3.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,263 +1,146 @@
1
- .react-autoql-response-content-container:not(.html-content) {
1
+ .react-autoql-bar-container {
2
2
  position: relative;
3
3
  display: flex;
4
- flex-direction: column;
5
- justify-content: center;
6
- align-items: center;
7
- background-color: inherit;
8
- font-size: 14px;
9
- height: 100%;
10
- width: 100%;
11
- overflow: hidden;
12
- color: var(--react-autoql-text-color-primary); }
13
-
14
- .react-autoql-response-content-container.html-content {
15
- position: relative;
16
- background-color: inherit;
17
- text-align: left;
18
- font-size: 14px;
19
- height: 100%;
20
- width: 100%;
21
- overflow: hidden;
22
- color: var(--react-autoql-text-color-primary); }
23
- .react-autoql-response-content-container.html-content table th {
24
- border-bottom: 2px solid var(--react-autoql-border-color); }
25
- .react-autoql-response-content-container.html-content table tr:not(:last-child) {
26
- border-bottom: 1px solid var(--react-autoql-border-color); }
27
- .react-autoql-response-content-container.html-content table td:not(:last-child) {
28
- border-right: 1px solid var(--react-autoql-border-color); }
29
- .react-autoql-response-content-container.html-content table th,
30
- .react-autoql-response-content-container.html-content table td {
31
- padding: 5px 10px; }
32
- .react-autoql-response-content-container.html-content * {
33
- font-size: inherit; }
34
- .react-autoql-response-content-container.html-content sup,
35
- .react-autoql-response-content-container.html-content sub {
36
- font-size: 10px; }
37
- .react-autoql-response-content-container.html-content > *:first-child {
38
- margin-top: 0 !important; }
39
- .react-autoql-response-content-container.html-content > *:last-child {
40
- margin-bottom: 0 !important; }
41
- .react-autoql-response-content-container.html-content caption {
42
- display: table-caption;
43
- text-align: -webkit-center;
44
- padding-top: unset;
45
- padding-bottom: unset;
46
- color: unset;
47
- text-align: unset;
48
- caption-side: unset; }
49
-
50
- .react-autoql-response-content-container.table {
51
- max-height: 100vh !important;
52
- overflow-y: scroll;
53
- scrollbar-width: none; }
54
-
55
- .react-autoql-response-content-container.table::-webkit-scrollbar {
56
- width: 0;
57
- height: 0; }
4
+ flex-direction: row; }
58
5
 
59
- .react-autoql-suggestion-btn {
60
- padding: 6px 14px;
61
- background: transparent;
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;
62
14
  font-family: inherit;
63
- font-size: 12px;
64
- margin-bottom: 5px;
15
+ letter-spacing: 0.04em;
65
16
  outline: none !important;
66
- cursor: pointer;
67
- letter-spacing: 0.05em;
68
- transition: all 0.1s ease;
69
- border: 1px solid rgba(0, 0, 0, 0.15);
70
- border-radius: 5px;
71
- color: inherit; }
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; }
72
23
 
73
- .react-autoql-suggestion-btn:hover {
74
- border-color: transparent;
75
- color: white;
76
- background: var(--react-autoql-accent-color); }
24
+ .react-autoql-chatbar-input.left-padding {
25
+ padding-left: 54px; }
77
26
 
78
- .react-autoql-help-link-btn {
79
- padding: 6px 14px;
80
- background: transparent;
81
- border-radius: 5px;
82
- font-family: inherit;
83
- font-size: 12px;
84
- margin-top: 5px;
85
- outline: none !important;
86
- cursor: pointer;
87
- letter-spacing: 0.05em;
88
- transition: all 0.1s ease;
89
- border-color: #e2e2e26e;
90
- color: inherit; }
27
+ .react-autoql-chatbar-input:disabled {
28
+ background: rgba(0, 0, 0, 0.03); }
91
29
 
92
- .react-autoql-help-link-btn:hover {
93
- opacity: 0.7; }
30
+ .react-autoql-chatbar-input:not(:disabled):hover {
31
+ box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
94
32
 
95
- .react-autoql-help-link-icon {
96
- width: 15px;
97
- height: 15px;
98
- margin-bottom: -3px;
99
- margin-right: 3px; }
33
+ .react-autoql-chatbar-input::-moz-placeholder {
34
+ /* Default color outside of data messenger */
35
+ color: #999 !important; }
100
36
 
101
- .qanda-positive-feedback-checkmark.react-autoql-icon svg {
102
- color: var(--react-autoql-success-color); }
37
+ .react-autoql-chatbar-input:-ms-input-placeholder {
38
+ /* Default color outside of data messenger */
39
+ color: #999 !important; }
103
40
 
104
- .react-autoql-suggestion-message {
105
- height: 100%;
106
- width: 100%;
107
- word-break: break-word; }
41
+ .react-autoql-chatbar-input::placeholder {
42
+ /* Default color outside of data messenger */
43
+ color: #999 !important; }
108
44
 
109
- .react-autoql-suggestions-select {
45
+ /* autosuggest */
46
+ .react-autoql-bar-container .react-autosuggest__container,
47
+ .react-autoql-chatbar-input-container {
110
48
  position: relative;
111
- display: inline-block;
112
- height: 30px;
113
- background: none;
114
- outline: none !important;
115
- border: 1px solid;
116
- font-family: inherit;
117
- letter-spacing: 0.05em;
118
- color: #28a8e0;
119
- cursor: pointer;
120
- font-size: inherit; }
121
-
122
- .no-columns-error-message {
123
- position: absolute;
124
- height: 100%;
125
- width: 100%;
126
- display: flex;
127
- justify-content: center;
128
- flex-direction: column;
129
- text-align: center;
130
- padding: 20px;
131
- font-size: 13px; }
132
- .no-columns-error-message .warning-icon {
133
- font-size: 22px;
134
- display: block;
135
- margin-bottom: -13px;
136
- text-align: center; }
137
- .no-columns-error-message .eye-icon {
138
- vertical-align: bottom;
139
- line-height: 18px; }
49
+ flex: 1; }
140
50
 
141
- /* query validation */
142
- .react-autoql-query-validation-selector-container {
143
- display: inline-block;
144
- position: relative; }
51
+ .react-autoql-bar-container .react-autosuggest__input--focused {
52
+ outline: none; }
145
53
 
146
- .react-autoql-select-popup-container.query-validation-select {
147
- padding: 5px 0;
148
- letter-spacing: 0.03em;
149
- font-family: var(--react-autoql-font-family), sans-serif; }
150
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
151
- height: unset;
152
- font-size: 14px;
153
- line-height: 24px;
154
- padding: 0 15px; }
155
- .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
156
- color: #d84830; }
54
+ .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
55
+ display: none; }
157
56
 
158
- .react-autoql-query-validation-query {
159
- text-align: center; }
57
+ .react-autoql-bar-container .react-autosuggest__suggestions-container {
58
+ display: none; }
160
59
 
161
- .react-autoql-query-validation-execute-btn {
162
- height: 38px;
163
- background: none;
164
- border-radius: 4px;
165
- margin-top: 24px;
166
- width: 100%;
167
- color: inherit;
168
- cursor: pointer;
169
- outline: none !important;
170
- border-color: #e2e2e26e;
171
- transition: all 0.2s ease; }
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; }
172
80
 
173
- .react-autoql-query-validation-execute-btn:hover {
174
- border-color: #28a8e0; }
81
+ .react-autoql-bar-container.autosuggest-top
82
+ .react-autosuggest__suggestions-container--open {
83
+ top: unset;
84
+ bottom: 45px; }
175
85
 
176
- .react-autoql-execute-query-icon {
177
- font-size: 16px;
178
- vertical-align: middle !important;
179
- padding-right: 3px !important; }
180
- .react-autoql-execute-query-icon span.react-autoql-icon svg {
181
- height: 19px;
182
- width: 19px;
183
- margin-top: 3px;
184
- margin-right: 4px;
185
- vertical-align: top;
186
- fill: var(--react-autoql-accent-color); }
86
+ .react-autoql-bar-container.autosuggest-bottom
87
+ .react-autosuggest__suggestions-container--open {
88
+ top: 45px;
89
+ bottom: unset; }
187
90
 
188
- .react-autoql-query-validation-select {
189
- position: relative;
190
- display: inline-block;
191
- height: 2em;
192
- background: none;
193
- outline: none !important;
194
- border: none;
195
- letter-spacing: 0.05em;
196
- font-family: inherit;
197
- font-size: inherit;
91
+ .react-autoql-bar-container .react-autosuggest__suggestions-list {
198
92
  margin: 0;
199
93
  padding: 0;
200
- border-radius: 0;
201
- border-bottom: 1px dashed;
202
- color: var(--react-autoql-accent-color); }
94
+ list-style-type: none; }
203
95
 
204
- .react-autoql-query-validation-delete-button {
205
- position: relative;
206
- cursor: pointer;
207
- margin-bottom: -2px; }
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); }
208
101
 
209
- .react-autoql-chart-tooltip {
210
- font-family: var(--react-autoql-font-family), sans-serif;
211
- letter-spacing: 0.04em;
212
- line-height: 22px;
213
- font-size: 13px;
214
- padding: 7px 15px;
215
- transition: all 0.2s ease !important;
216
- text-align: left !important;
217
- opacity: 1 !important;
218
- z-index: 99999 !important;
219
- /* necessary to show up on top of rc drawer */ }
102
+ .react-autoql-bar-container .react-autosuggest__suggestion {
103
+ color: var(--react-autoql-text-color-primary); }
220
104
 
221
- .single-value-response {
222
- color: inherit;
223
- cursor: unset; }
224
- .single-value-response:hover {
225
- color: inherit; }
105
+ .react-autoql-chatbar-input {
106
+ border: 1px solid var(--react-autoql-border-color);
107
+ color: var(--react-autoql-text-color-primary); }
226
108
 
227
- .single-value-response.with-drilldown:hover {
228
- color: inherit;
229
- text-decoration: underline;
230
- font-weight: 600;
231
- cursor: pointer; }
109
+ .react-autoql-chatbar-input::-moz-placeholder {
110
+ color: var(--react-autoql-text-color-placeholder); }
232
111
 
233
- .react-autoql-query-validation-container {
234
- width: 100%; }
112
+ .react-autoql-chatbar-input:-ms-input-placeholder {
113
+ color: var(--react-autoql-text-color-placeholder); }
235
114
 
236
- .react-autoql-query-validation-description {
237
- margin-bottom: 14px; }
115
+ .react-autoql-chatbar-input::placeholder {
116
+ color: var(--react-autoql-text-color-placeholder); }
238
117
 
239
- .context-menu {
240
- background: var(--react-autoql-background-color-primary);
241
- /* height: 100px; */
242
- width: 150px;
243
- padding: 10px 0; }
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; }
244
124
 
245
- .context-menu-list {
246
- list-style-type: none;
247
- width: 100%;
248
- margin: 0;
249
- padding: 0; }
125
+ .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
126
+ background-color: rgba(0, 0, 0, 0.1) !important; }
250
127
 
251
- .context-menu-list li {
252
- color: var(--react-autoql-text-color-primary);
253
- width: 100%;
254
- height: 35px;
255
- line-height: 35px;
256
- padding: 0 20px;
257
- cursor: pointer; }
128
+ .react-autoql-bar-container .react-autosuggest__section-title {
129
+ padding: 10px 0 0 10px;
130
+ font-size: 12px;
131
+ color: #777; }
258
132
 
259
- .context-menu-list li:hover {
260
- background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
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; }
261
144
 
262
145
  .chat-voice-record-button {
263
146
  width: 40px;
@@ -924,6 +807,67 @@
924
807
  top: 30px;
925
808
  opacity: 0; } }
926
809
 
810
+ .react-autoql-dashboard-container {
811
+ background: var(--react-autoql-background-color-secondary);
812
+ height: 100%;
813
+ width: 100%;
814
+ overflow: hidden; }
815
+
816
+ .react-autoql-dashboard-container.edit-mode {
817
+ padding-bottom: 200px; }
818
+
819
+ .dashboard-drilldown-modal .ReactModal__Content {
820
+ top: unset !important;
821
+ margin-top: 20px !important;
822
+ max-height: 93vh !important; }
823
+
824
+ .dashboard-drilldown-modal .react-autoql-modal-body {
825
+ padding: 0; }
826
+
827
+ .dashboard-drilldown-modal .react-autoql-table {
828
+ opacity: 0.9;
829
+ font-size: 11px; }
830
+
831
+ .dashboard-drilldown-modal .splitter-layout {
832
+ height: calc(100% - 55px); }
833
+
834
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
835
+ padding: 20px;
836
+ padding-bottom: 10px; }
837
+
838
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn {
839
+ text-align: right;
840
+ width: 100%;
841
+ padding-right: 20px; }
842
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
843
+ position: absolute;
844
+ bottom: 5px;
845
+ width: 100px;
846
+ right: 0; }
847
+ .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
848
+ padding-top: 10px;
849
+ margin-bottom: -8px; }
850
+
851
+ .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
852
+ padding: 20px;
853
+ padding-top: 10px;
854
+ overflow: hidden;
855
+ height: 100%; }
856
+
857
+ .empty-dashboard-message-container {
858
+ font-family: var(--react-autoql-font-family);
859
+ color: var(--react-autoql-text-color-primary);
860
+ letter-spacing: 0.02em;
861
+ text-align: center;
862
+ padding: 100px;
863
+ height: 100%;
864
+ width: 100%; }
865
+
866
+ .empty-dashboard-new-tile-btn {
867
+ color: var(--react-autoql-accent-color);
868
+ font-weight: bold;
869
+ cursor: pointer; }
870
+
927
871
  .loading-container-centered {
928
872
  height: 100%;
929
873
  width: 100%;
@@ -1014,1414 +958,1298 @@ span.react-autoql-icon {
1014
958
  border-radius: 50%;
1015
959
  box-sizing: content-box; }
1016
960
 
1017
- .react-autoql-bar-container {
961
+ .react-autoql-response-content-container:not(.html-content) {
1018
962
  position: relative;
1019
963
  display: flex;
1020
- flex-direction: row; }
964
+ flex-direction: column;
965
+ justify-content: center;
966
+ align-items: center;
967
+ background-color: inherit;
968
+ font-size: 14px;
969
+ height: 100%;
970
+ width: 100%;
971
+ overflow: hidden;
972
+ color: var(--react-autoql-text-color-primary); }
1021
973
 
1022
- .react-autoql-chatbar-input {
1023
- padding: 10px;
1024
- padding-left: 20px;
1025
- margin: 10px;
1026
- height: 42px;
1027
- box-sizing: border-box;
1028
- border-radius: 24px;
1029
- font-size: 16px;
974
+ .react-autoql-response-content-container.html-content {
975
+ position: relative;
976
+ background-color: inherit;
977
+ text-align: left;
978
+ font-size: 14px;
979
+ height: 100%;
980
+ width: 100%;
981
+ overflow: hidden;
982
+ color: var(--react-autoql-text-color-primary); }
983
+ .react-autoql-response-content-container.html-content table th {
984
+ border-bottom: 2px solid var(--react-autoql-border-color); }
985
+ .react-autoql-response-content-container.html-content table tr:not(:last-child) {
986
+ border-bottom: 1px solid var(--react-autoql-border-color); }
987
+ .react-autoql-response-content-container.html-content table td:not(:last-child) {
988
+ border-right: 1px solid var(--react-autoql-border-color); }
989
+ .react-autoql-response-content-container.html-content table th,
990
+ .react-autoql-response-content-container.html-content table td {
991
+ padding: 5px 10px; }
992
+ .react-autoql-response-content-container.html-content * {
993
+ font-size: inherit; }
994
+ .react-autoql-response-content-container.html-content sup,
995
+ .react-autoql-response-content-container.html-content sub {
996
+ font-size: 10px; }
997
+ .react-autoql-response-content-container.html-content > *:first-child {
998
+ margin-top: 0 !important; }
999
+ .react-autoql-response-content-container.html-content > *:last-child {
1000
+ margin-bottom: 0 !important; }
1001
+ .react-autoql-response-content-container.html-content caption {
1002
+ display: table-caption;
1003
+ text-align: -webkit-center;
1004
+ padding-top: unset;
1005
+ padding-bottom: unset;
1006
+ color: unset;
1007
+ text-align: unset;
1008
+ caption-side: unset; }
1009
+
1010
+ .react-autoql-response-content-container.table {
1011
+ max-height: 100vh !important;
1012
+ overflow-y: scroll;
1013
+ scrollbar-width: none; }
1014
+
1015
+ .react-autoql-response-content-container.table::-webkit-scrollbar {
1016
+ width: 0;
1017
+ height: 0; }
1018
+
1019
+ .react-autoql-suggestion-btn {
1020
+ padding: 6px 14px;
1021
+ background: transparent;
1030
1022
  font-family: inherit;
1031
- letter-spacing: 0.04em;
1023
+ font-size: 12px;
1024
+ margin-bottom: 5px;
1032
1025
  outline: none !important;
1033
- width: calc(100% - 20px);
1034
- font-family: inherit;
1035
- /* Default styles outside of data messenger */
1036
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1037
- background: var(--react-autoql-background-color-primary);
1038
- color: #5d5d5d; }
1039
-
1040
- .react-autoql-chatbar-input.left-padding {
1041
- padding-left: 54px; }
1026
+ cursor: pointer;
1027
+ letter-spacing: 0.05em;
1028
+ transition: all 0.1s ease;
1029
+ border: 1px solid rgba(0, 0, 0, 0.15);
1030
+ border-radius: 5px;
1031
+ color: inherit; }
1042
1032
 
1043
- .react-autoql-chatbar-input:disabled {
1044
- background: rgba(0, 0, 0, 0.03); }
1033
+ .react-autoql-suggestion-btn:hover {
1034
+ border-color: transparent;
1035
+ color: white;
1036
+ background: var(--react-autoql-accent-color); }
1045
1037
 
1046
- .react-autoql-chatbar-input:not(:disabled):hover {
1047
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1); }
1038
+ .react-autoql-help-link-btn {
1039
+ padding: 6px 14px;
1040
+ background: transparent;
1041
+ border-radius: 5px;
1042
+ font-family: inherit;
1043
+ font-size: 12px;
1044
+ margin-top: 5px;
1045
+ outline: none !important;
1046
+ cursor: pointer;
1047
+ letter-spacing: 0.05em;
1048
+ transition: all 0.1s ease;
1049
+ border-color: #e2e2e26e;
1050
+ color: inherit; }
1048
1051
 
1049
- .react-autoql-chatbar-input::-moz-placeholder {
1050
- /* Default color outside of data messenger */
1051
- color: #999 !important; }
1052
+ .react-autoql-help-link-btn:hover {
1053
+ opacity: 0.7; }
1052
1054
 
1053
- .react-autoql-chatbar-input:-ms-input-placeholder {
1054
- /* Default color outside of data messenger */
1055
- color: #999 !important; }
1055
+ .react-autoql-help-link-icon {
1056
+ width: 15px;
1057
+ height: 15px;
1058
+ margin-bottom: -3px;
1059
+ margin-right: 3px; }
1056
1060
 
1057
- .react-autoql-chatbar-input::placeholder {
1058
- /* Default color outside of data messenger */
1059
- color: #999 !important; }
1061
+ .qanda-positive-feedback-checkmark.react-autoql-icon svg {
1062
+ color: var(--react-autoql-success-color); }
1060
1063
 
1061
- /* autosuggest */
1062
- .react-autoql-bar-container .react-autosuggest__container,
1063
- .react-autoql-chatbar-input-container {
1064
+ .react-autoql-suggestion-message {
1065
+ height: 100%;
1066
+ width: 100%;
1067
+ word-break: break-word; }
1068
+
1069
+ .react-autoql-suggestions-select {
1064
1070
  position: relative;
1065
- flex: 1; }
1071
+ display: inline-block;
1072
+ height: 30px;
1073
+ background: none;
1074
+ outline: none !important;
1075
+ border: 1px solid;
1076
+ font-family: inherit;
1077
+ letter-spacing: 0.05em;
1078
+ color: #28a8e0;
1079
+ cursor: pointer;
1080
+ font-size: inherit; }
1066
1081
 
1067
- .react-autoql-bar-container .react-autosuggest__input--focused {
1068
- outline: none; }
1082
+ .no-columns-error-message {
1083
+ position: absolute;
1084
+ height: 100%;
1085
+ width: 100%;
1086
+ display: flex;
1087
+ justify-content: center;
1088
+ flex-direction: column;
1089
+ text-align: center;
1090
+ padding: 20px;
1091
+ font-size: 13px; }
1092
+ .no-columns-error-message .warning-icon {
1093
+ font-size: 22px;
1094
+ display: block;
1095
+ margin-bottom: -13px;
1096
+ text-align: center; }
1097
+ .no-columns-error-message .eye-icon {
1098
+ vertical-align: bottom;
1099
+ line-height: 18px; }
1069
1100
 
1070
- .react-autoql-bar-container .react-autosuggest__input::-ms-clear {
1071
- display: none; }
1101
+ /* query validation */
1102
+ .react-autoql-query-validation-selector-container {
1103
+ display: inline-block;
1104
+ position: relative; }
1072
1105
 
1073
- .react-autoql-bar-container .react-autosuggest__suggestions-container {
1074
- display: none; }
1106
+ .react-autoql-select-popup-container.query-validation-select {
1107
+ padding: 5px 0;
1108
+ letter-spacing: 0.03em;
1109
+ font-family: var(--react-autoql-font-family), sans-serif; }
1110
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option {
1111
+ height: unset;
1112
+ font-size: 14px;
1113
+ line-height: 24px;
1114
+ padding: 0 15px; }
1115
+ .react-autoql-select-popup-container.query-validation-select .react-autoql-select-option:last-of-type {
1116
+ color: #d84830; }
1075
1117
 
1076
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
1077
- position: absolute;
1078
- top: 45px;
1079
- bottom: unset;
1080
- margin: 10px;
1081
- padding-top: 5px;
1082
- padding-bottom: 5px;
1083
- display: block;
1084
- width: calc(100% - 20px);
1085
- height: unset;
1086
- border-radius: 24px;
1087
- font-family: inherit;
1088
- font-size: 15px;
1089
- font-weight: normal;
1090
- z-index: 2;
1091
- overflow: hidden;
1092
- box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
1093
- /* Default styles outside of data messenger */
1094
- background-color: white;
1095
- color: #5d5d5d; }
1118
+ .react-autoql-query-validation-query {
1119
+ text-align: center; }
1096
1120
 
1097
- .react-autoql-bar-container.autosuggest-top
1098
- .react-autosuggest__suggestions-container--open {
1099
- top: unset;
1100
- bottom: 45px; }
1121
+ .react-autoql-query-validation-execute-btn {
1122
+ height: 38px;
1123
+ background: none;
1124
+ border-radius: 4px;
1125
+ margin-top: 24px;
1126
+ width: 100%;
1127
+ color: inherit;
1128
+ cursor: pointer;
1129
+ outline: none !important;
1130
+ border-color: #e2e2e26e;
1131
+ transition: all 0.2s ease; }
1101
1132
 
1102
- .react-autoql-bar-container.autosuggest-bottom
1103
- .react-autosuggest__suggestions-container--open {
1104
- top: 45px;
1105
- bottom: unset; }
1133
+ .react-autoql-query-validation-execute-btn:hover {
1134
+ border-color: #28a8e0; }
1106
1135
 
1107
- .react-autoql-bar-container .react-autosuggest__suggestions-list {
1136
+ .react-autoql-execute-query-icon {
1137
+ font-size: 16px;
1138
+ vertical-align: middle !important;
1139
+ padding-right: 3px !important; }
1140
+ .react-autoql-execute-query-icon span.react-autoql-icon svg {
1141
+ height: 19px;
1142
+ width: 19px;
1143
+ margin-top: 3px;
1144
+ margin-right: 4px;
1145
+ vertical-align: top;
1146
+ fill: var(--react-autoql-accent-color); }
1147
+
1148
+ .react-autoql-query-validation-select {
1149
+ position: relative;
1150
+ display: inline-block;
1151
+ height: 2em;
1152
+ background: none;
1153
+ outline: none !important;
1154
+ border: none;
1155
+ letter-spacing: 0.05em;
1156
+ font-family: inherit;
1157
+ font-size: inherit;
1108
1158
  margin: 0;
1109
1159
  padding: 0;
1110
- list-style-type: none; }
1160
+ border-radius: 0;
1161
+ border-bottom: 1px dashed;
1162
+ color: var(--react-autoql-accent-color); }
1111
1163
 
1112
- /* Autocomplete styles */
1113
- .react-autoql-bar-container .react-autosuggest__suggestions-container--open {
1114
- background-color: var(--react-autoql-background-color-primary);
1115
- border: 1px solid var(--react-autoql-border-color);
1116
- color: var(--react-autoql-text-color-primary); }
1164
+ .react-autoql-query-validation-delete-button {
1165
+ position: relative;
1166
+ cursor: pointer;
1167
+ margin-bottom: -2px; }
1117
1168
 
1118
- .react-autoql-bar-container .react-autosuggest__suggestion {
1119
- color: var(--react-autoql-text-color-primary); }
1169
+ .react-autoql-chart-tooltip {
1170
+ font-family: var(--react-autoql-font-family), sans-serif;
1171
+ letter-spacing: 0.04em;
1172
+ line-height: 22px;
1173
+ font-size: 13px;
1174
+ padding: 7px 15px;
1175
+ transition: all 0.2s ease !important;
1176
+ text-align: left !important;
1177
+ opacity: 1 !important;
1178
+ z-index: 99999 !important;
1179
+ /* necessary to show up on top of rc drawer */ }
1120
1180
 
1121
- .react-autoql-chatbar-input {
1122
- border: 1px solid var(--react-autoql-border-color);
1123
- color: var(--react-autoql-text-color-primary); }
1181
+ .single-value-response {
1182
+ color: inherit;
1183
+ cursor: unset; }
1184
+ .single-value-response:hover {
1185
+ color: inherit; }
1124
1186
 
1125
- .react-autoql-chatbar-input::-moz-placeholder {
1126
- color: var(--react-autoql-text-color-placeholder); }
1187
+ .single-value-response.with-drilldown:hover {
1188
+ color: inherit;
1189
+ text-decoration: underline;
1190
+ font-weight: 600;
1191
+ cursor: pointer; }
1127
1192
 
1128
- .react-autoql-chatbar-input:-ms-input-placeholder {
1129
- color: var(--react-autoql-text-color-placeholder); }
1193
+ .react-autoql-query-validation-container {
1194
+ width: 100%; }
1130
1195
 
1131
- .react-autoql-chatbar-input::placeholder {
1132
- color: var(--react-autoql-text-color-placeholder); }
1196
+ .react-autoql-query-validation-description {
1197
+ margin-bottom: 14px; }
1133
1198
 
1134
- .react-autoql-bar-container .react-autosuggest__suggestion {
1135
- cursor: pointer;
1136
- padding: 2px;
1137
- padding-left: 18px;
1138
- letter-spacing: 0.05em;
1139
- line-height: 22.5px; }
1199
+ .context-menu {
1200
+ background: var(--react-autoql-background-color-primary);
1201
+ /* height: 100px; */
1202
+ width: 150px;
1203
+ padding: 10px 0; }
1140
1204
 
1141
- .react-autoql-bar-container .react-autosuggest__suggestion--highlighted {
1142
- background-color: rgba(0, 0, 0, 0.1) !important; }
1205
+ .context-menu-list {
1206
+ list-style-type: none;
1207
+ width: 100%;
1208
+ margin: 0;
1209
+ padding: 0; }
1143
1210
 
1144
- .react-autoql-bar-container .react-autosuggest__section-title {
1145
- padding: 10px 0 0 10px;
1146
- font-size: 12px;
1147
- color: #777; }
1211
+ .context-menu-list li {
1212
+ color: var(--react-autoql-text-color-primary);
1213
+ width: 100%;
1214
+ height: 35px;
1215
+ line-height: 35px;
1216
+ padding: 0 20px;
1217
+ cursor: pointer; }
1148
1218
 
1149
- .input-response-loading-container {
1150
- position: absolute;
1151
- right: 23px;
1152
- top: -2px; }
1219
+ .context-menu-list li:hover {
1220
+ background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.05)); }
1153
1221
 
1154
- .chat-bar-input-icon {
1155
- position: absolute;
1156
- color: #28a8e0;
1157
- font-size: 20px;
1158
- left: 30px;
1159
- top: 15px; }
1222
+ .react-autoql-dashboard .react-grid-item {
1223
+ background: var(--react-autoql-background-color-primary, #fff);
1224
+ color: var(--react-autoql-text-color-primary, #404040);
1225
+ font-family: var(--react-autoql-font-family), sans-serif;
1226
+ overflow: hidden;
1227
+ border-radius: 4px;
1228
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1160
1229
 
1161
- .react-autoql-dashboard-container {
1162
- background: var(--react-autoql-background-color-secondary);
1230
+ .react-autoql-dashboard-tile-inner-div {
1163
1231
  height: 100%;
1164
1232
  width: 100%;
1165
- overflow: hidden; }
1233
+ background: inherit;
1234
+ position: relative;
1235
+ text-align: center;
1236
+ display: flex;
1237
+ justify-content: flex-start;
1238
+ flex-direction: column;
1239
+ align-items: center; }
1166
1240
 
1167
- .react-autoql-dashboard-container.edit-mode {
1168
- padding-bottom: 200px; }
1241
+ .dashboard-data-limit-warning-icon {
1242
+ color: var(--react-autoql-warning-color) !important;
1243
+ position: absolute !important;
1244
+ bottom: 40px;
1245
+ right: 16px;
1246
+ font-size: 20px; }
1169
1247
 
1170
- .dashboard-drilldown-modal .ReactModal__Content {
1171
- top: unset !important;
1172
- margin-top: 20px !important;
1173
- max-height: 93vh !important; }
1248
+ .react-autoql-dashboard-tile-drag-handle {
1249
+ transition: opacity 0.3s ease;
1250
+ position: absolute;
1251
+ background-color: var(--react-autoql-border-color, #f7f7f7);
1252
+ cursor: move;
1253
+ opacity: 0; }
1254
+ .react-autoql-dashboard-tile-drag-handle.top {
1255
+ top: 0;
1256
+ left: 0;
1257
+ width: 100%;
1258
+ height: 15px; }
1259
+ .react-autoql-dashboard-tile-drag-handle.bottom {
1260
+ bottom: 0;
1261
+ left: 0;
1262
+ width: 100%;
1263
+ height: 15px; }
1264
+ .react-autoql-dashboard-tile-drag-handle.left {
1265
+ top: 0;
1266
+ left: 0;
1267
+ width: 15px;
1268
+ height: 100%; }
1269
+ .react-autoql-dashboard-tile-drag-handle.right {
1270
+ top: 0;
1271
+ right: 0;
1272
+ width: 15px;
1273
+ height: 100%; }
1174
1274
 
1175
- .dashboard-drilldown-modal .react-autoql-modal-body {
1176
- padding: 0; }
1275
+ .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1276
+ opacity: 1; }
1177
1277
 
1178
- .dashboard-drilldown-modal .react-autoql-table {
1179
- opacity: 0.9;
1180
- font-size: 11px; }
1278
+ .react-autoql-dashboard-tile .autoql-options-toolbar {
1279
+ transition: opacity 0.3s ease, color 0.3s ease;
1280
+ visibility: hidden;
1281
+ opacity: 0;
1282
+ bottom: 8px;
1283
+ right: 8px;
1284
+ z-index: 1; }
1181
1285
 
1182
- .dashboard-drilldown-modal .splitter-layout {
1183
- height: calc(100% - 55px); }
1286
+ .dashboard-tile-viz-toolbar-container {
1287
+ transition: opacity 0.3s ease, color 0.3s ease;
1288
+ color: var(--react-autoql-accent-color);
1289
+ position: absolute;
1290
+ bottom: 0;
1291
+ left: 0;
1292
+ padding: 7px;
1293
+ z-index: 1;
1294
+ opacity: 0;
1295
+ visibility: hidden; }
1296
+ .dashboard-tile-viz-toolbar-container .viz-toolbar,
1297
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1298
+ position: relative;
1299
+ display: inline-block;
1300
+ background: var(--react-autoql-background-color-primary); }
1301
+ .dashboard-tile-viz-toolbar-container .split-view-btn {
1302
+ margin-right: 7px; }
1303
+ .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1304
+ font-size: 14px; }
1184
1305
 
1185
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-original {
1186
- padding: 20px;
1187
- padding-bottom: 10px; }
1306
+ .split-view-btn {
1307
+ z-index: 1; }
1188
1308
 
1189
- .dashboard-drilldown-modal .drilldown-hide-chart-btn {
1190
- text-align: right;
1309
+ .split-view-query-btn {
1310
+ transition: opacity 0.3s ease, color 0.3s ease;
1311
+ color: var(--react-autoql-accent-color);
1312
+ position: absolute;
1313
+ top: 7px;
1314
+ left: 7px;
1315
+ bottom: unset;
1316
+ z-index: 1;
1317
+ visibility: hidden;
1318
+ opacity: 0; }
1319
+
1320
+ .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1321
+ .react-autoql-dashboard-tile:hover .split-view-query-btn,
1322
+ .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1323
+ visibility: visible;
1324
+ opacity: 1; }
1325
+
1326
+ .react-autoql-dashboard-tile-inner-div .single-value-response {
1327
+ font-size: 32px;
1328
+ margin-top: -6px;
1329
+ opacity: 0.9; }
1330
+
1331
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1332
+ height: calc(100% - 47px);
1191
1333
  width: 100%;
1192
- padding-right: 20px; }
1193
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.bottom {
1194
- position: absolute;
1195
- bottom: 5px;
1196
- width: 100px;
1197
- right: 0; }
1198
- .dashboard-drilldown-modal .drilldown-hide-chart-btn.top {
1199
- padding-top: 10px;
1200
- margin-bottom: -8px; }
1334
+ padding-top: 0;
1335
+ background: inherit; }
1336
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1337
+ opacity: 0.8; }
1338
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1339
+ height: 1px !important;
1340
+ color: var(--react-autoql-border-color);
1341
+ opacity: 0.3;
1342
+ pointer-events: none; }
1343
+ .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1344
+ opacity: 0.9;
1345
+ color: var(--react-autoql-text-color-primary);
1346
+ font-size: 11px; }
1201
1347
 
1202
- .dashboard-drilldown-modal .react-autoql-dashboard-drilldown-table {
1203
- padding: 20px;
1204
- padding-top: 10px;
1205
- overflow: hidden;
1206
- height: 100%; }
1348
+ .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1349
+ padding: 0; }
1207
1350
 
1208
- .empty-dashboard-message-container {
1209
- font-family: var(--react-autoql-font-family);
1351
+ .react-autoql-dashboard-tile-inner-div
1352
+ .dashboard-tile-response-wrapper.editing .layout-splitter {
1353
+ display: block;
1354
+ pointer-events: unset;
1355
+ height: 4px !important;
1210
1356
  color: var(--react-autoql-text-color-primary);
1211
- letter-spacing: 0.02em;
1212
- text-align: center;
1213
- padding: 100px;
1214
- height: 100%;
1215
- width: 100%; }
1357
+ opacity: 0.8; }
1216
1358
 
1217
- .empty-dashboard-new-tile-btn {
1218
- color: var(--react-autoql-accent-color);
1219
- font-weight: bold;
1220
- cursor: pointer; }
1359
+ /* Safetynet styles specific to dashboard tiles */
1360
+ .react-autoql-dashboard-tile-inner-div
1361
+ .dashboard-tile-response-wrapper.editing {
1362
+ height: 100%;
1363
+ width: 100%;
1364
+ overflow-x: auto;
1365
+ overflow-y: hidden; }
1221
1366
 
1222
- .react-autoql-notifications-button-container {
1223
- position: relative;
1224
- display: inline-block;
1225
- font-size: inherit;
1226
- line-height: 1em;
1227
- width: 1em; }
1228
- .react-autoql-notifications-button-container .react-autoql-notifications-button {
1229
- font-size: 1em;
1230
- line-height: 0;
1231
- vertical-align: bottom; }
1232
- .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1233
- position: absolute;
1234
- border: 2px solid #fff;
1235
- background: #f5222d;
1236
- border-radius: 6.3em;
1237
- line-height: 1.3em;
1238
- left: 0.6em;
1239
- top: -0.8em;
1240
- padding: 0.15em 0.5em;
1241
- text-align: center;
1242
- color: white;
1243
- font-size: 0.5em; }
1244
- .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1245
- position: absolute;
1246
- display: inline-block;
1247
- border: 2px solid #fff;
1248
- background: #f5222d;
1249
- border-radius: 50%;
1250
- height: 0.6em;
1251
- width: 0.6em;
1252
- left: 0.5em;
1253
- top: -2px; }
1367
+ .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1368
+ white-space: nowrap; }
1254
1369
 
1255
- .notification-rule-add-btn-outer,
1256
- .notification-rule-validate-btn-outer {
1257
- text-align: center;
1258
- border-style: dashed !important;
1259
- height: 38px;
1260
- line-height: 25px;
1261
- margin: 0 !important;
1262
- overflow: hidden; }
1370
+ .dashboard-tile-response-wrapper.small
1371
+ .react-autoql-query-validation-description,
1372
+ .dashboard-tile-response-wrapper.small
1373
+ .react-autoql-suggestion-message-description,
1374
+ .dashboard-tile-response-wrapper.small
1375
+ .react-autoql-query-validation-execute-btn {
1376
+ display: none; }
1263
1377
 
1264
- .notification-rule-outer-container {
1378
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1265
1379
  position: relative;
1266
- border: 1px solid transparent;
1267
- border-radius: 4px; }
1268
- .notification-rule-outer-container.outlined {
1269
- border-color: rgba(0, 0, 0, 0.15);
1270
- padding: 0 20px;
1271
- padding-bottom: 12px; }
1380
+ height: 100%;
1381
+ width: 100%;
1382
+ background: inherit;
1383
+ cursor: default; }
1384
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1385
+ padding: 20px;
1386
+ padding-top: 15px;
1387
+ width: 100%; }
1388
+ .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1389
+ padding: 7px; }
1272
1390
 
1273
- .notification-outer-all-any {
1274
- position: absolute;
1275
- left: 0;
1276
- top: 50%; }
1391
+ .dashboard-tile-title-container {
1392
+ width: 100%;
1393
+ text-align: left;
1394
+ padding: 19px 25px 0 25px;
1395
+ height: 47px;
1396
+ white-space: nowrap;
1397
+ overflow: hidden;
1398
+ text-overflow: ellipsis;
1399
+ flex-shrink: 0;
1400
+ flex-grow: 0; }
1401
+ .dashboard-tile-title-container .dashboard-tile-title {
1402
+ color: var(--react-autoql-accent-color, #26a7df); }
1277
1403
 
1278
- .notification-first-group-btn-container {
1404
+ .dashboard-tile-title-container .dashboard-tile-title {
1405
+ font-weight: bold;
1406
+ font-size: 14px; }
1407
+
1408
+ .dashboard-tile-edit-wrapper {
1279
1409
  display: flex;
1280
- justify-content: space-between; }
1410
+ width: 100%;
1411
+ height: 55px;
1412
+ padding: 20px 20px 0 25px;
1413
+ flex-shrink: 0;
1414
+ flex-grow: 0; }
1281
1415
 
1282
- .data-alerts-container.read-only .react-autoql-notification-group-container {
1283
- border: none; }
1416
+ .dashboard-tile-play-button {
1417
+ cursor: default;
1418
+ flex-grow: 0;
1419
+ flex-shrink: 0; }
1284
1420
 
1285
- .react-autoql-notification-list-item {
1286
- display: flex;
1287
- flex-direction: column;
1288
- flex-basis: auto;
1289
- --accent-color: #26a7df;
1290
- position: relative;
1291
- overflow: hidden;
1292
- background: var(--react-autoql-background-color-primary, #fff);
1293
- border-radius: 4px;
1294
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1295
- margin-bottom: 8px;
1296
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1297
- font-family: var(--react-autoql-font-family), sans-serif;
1298
- transition: all 1s ease;
1299
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1300
- -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1301
- animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1302
- -webkit-animation-fill-mode: both;
1303
- animation-fill-mode: both;
1304
- -webkit-animation-delay: 0s;
1305
- animation-delay: 0s; }
1306
- .react-autoql-notification-list-item .single-value-response {
1307
- font-size: 32px;
1308
- margin-top: -6px;
1309
- opacity: 0.9; }
1310
- .react-autoql-notification-list-item .viz-toolbar {
1311
- position: relative;
1312
- border: none; }
1313
- .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1314
- height: 33px; }
1315
- .react-autoql-notification-list-item .react-autoql-notification-details-title {
1316
- font-weight: 600;
1317
- padding-top: 20px;
1318
- padding-bottom: 5px; }
1319
- .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1320
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1321
- .react-autoql-notification-list-item .react-autoql-notification-details {
1322
- overflow: hidden; }
1323
- .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1324
- overflow: auto; }
1325
- .react-autoql-notification-list-item:hover:not(.expanded) {
1326
- background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1327
- .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1328
- opacity: 1; }
1329
- .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1330
- color: var(--react-autoql-accent-color, #26a7df) !important; }
1331
- .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1332
- margin-top: 3px;
1333
- color: var(--react-autoql-accent-color, #26a7df); }
1334
- .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1335
- opacity: 1; }
1336
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1337
- display: flex;
1338
- flex-direction: column;
1339
- justify-content: stretch;
1340
- transition: height 0.2s ease;
1341
- height: 0;
1342
- opacity: 0; }
1343
- .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1344
- height: 400px;
1345
- opacity: 1; }
1346
- .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1347
- flex: 0;
1348
- flex-basis: 55px;
1349
- text-align: center;
1350
- padding: 8px;
1351
- border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1352
- .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1353
- line-height: 40px;
1354
- opacity: 0.6;
1355
- font-style: italic; }
1356
- .react-autoql-notification-list-item .react-autoql-notification-description {
1357
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1358
- opacity: 0.8;
1359
- font-size: 14px; }
1360
- .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1361
- display: flex;
1362
- flex-direction: row;
1363
- justify-content: space-between;
1364
- padding-left: 22px;
1365
- cursor: pointer; }
1366
- .react-autoql-notification-list-item .react-autoql-notification-query-title {
1367
- flex: 0 0 auto;
1368
- font-size: 14px;
1369
- font-family: inherit;
1370
- color: currentcolor;
1371
- opacity: 0.9;
1372
- font-weight: 600;
1373
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1374
- text-align: center;
1375
- margin: 0 10px;
1376
- padding-top: 20px;
1377
- padding-bottom: 7px; }
1378
- .react-autoql-notification-list-item .react-autoql-notification-details-container {
1379
- flex: 1;
1380
- display: flex;
1381
- flex-direction: row;
1382
- align-items: stretch;
1383
- justify-content: stretch;
1384
- overflow: hidden; }
1385
- .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1386
- flex: 1 1;
1387
- padding: 20px;
1388
- padding-top: 0;
1389
- opacity: 0.9;
1390
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1391
- .react-autoql-notification-list-item .react-autoql-notification-data-container {
1392
- display: flex;
1393
- flex-direction: row;
1394
- justify-content: stretch;
1395
- flex: 3 3 0px;
1396
- overflow: hidden; }
1397
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1398
- flex: 1;
1399
- height: 100%;
1400
- width: 0;
1401
- display: flex;
1402
- flex-direction: column;
1403
- padding: 0px 20px 10px 20px; }
1404
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
1405
- width: 100%;
1406
- padding: 0 10px; }
1407
- .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
1408
- opacity: 0.9;
1409
- color: currentColor;
1410
- font-size: 11px; }
1411
- .react-autoql-notification-list-item .react-autoql-notification-data-title {
1412
- line-height: 22px;
1413
- font-size: 12px;
1414
- text-align: right;
1415
- color: var(--react-autoql-text-color-primary);
1416
- opacity: 0.5;
1417
- padding: 8px 20px; }
1418
- .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
1419
- margin-top: -3px;
1420
- vertical-align: middle; }
1421
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
1422
- font-size: 21px;
1423
- margin: 11px;
1424
- width: 40px;
1425
- height: 40px;
1426
- padding: 10px;
1427
- border-radius: 26px;
1428
- display: inline-block;
1429
- line-height: 20px;
1430
- background-color: transparent;
1431
- transition: background-color 0.2s ease;
1432
- cursor: pointer; }
1433
- .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
1434
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1435
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
1436
- font-size: 18px;
1437
- margin-top: 3px;
1438
- margin-right: 3px;
1439
- opacity: 0;
1440
- width: 36px;
1441
- height: 36px;
1442
- padding: 9px;
1443
- border-radius: 20px;
1444
- display: inline-block;
1445
- line-height: 20px;
1446
- background-color: transparent;
1447
- transition: all 0.2s ease;
1448
- cursor: pointer; }
1449
- .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
1450
- background-color: var(--react-autoql-background-color-secondary, #ececec); }
1451
- .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
1452
- position: absolute;
1453
- top: -7px;
1454
- left: -7px;
1455
- color: var(--react-autoql-accent-color, #26a7df);
1456
- line-height: 10px;
1457
- background: var(--react-autoql-background-color-primary, #fff);
1458
- border-radius: 10px;
1459
- font-size: 17px; }
1460
- .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
1461
- height: 100%;
1462
- opacity: 0;
1463
- position: absolute;
1464
- left: 0px;
1465
- top: 0;
1466
- width: 4px;
1467
- background: var(--react-autoql-accent-color, #26a7df);
1468
- transition-property: opacity;
1469
- transition-duration: 0.2s;
1470
- transition-timing-function: ease; }
1471
- .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
1472
- flex: 0 0 50px;
1473
- padding: 10px;
1474
- border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1475
- .react-autoql-notification-list-item .react-autoql-notification-img-container {
1476
- flex: 0 0 60px; }
1477
- .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
1478
- border-radius: 50px;
1479
- height: 45px;
1480
- width: 45px;
1481
- line-height: 45px;
1482
- font-size: 22px;
1483
- color: white;
1484
- background-color: var(--react-autoql-accent-color, #26a7df);
1485
- text-align: center;
1486
- margin-top: 13px;
1487
- margin-right: 17px; }
1488
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
1489
- flex: 1;
1490
- line-height: 23px;
1491
- padding: 13px 0px;
1492
- transition: color 0.2s ease; }
1493
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
1494
- font-size: 18px;
1495
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
1496
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
1497
- font-size: 12px;
1498
- opacity: 0.5; }
1499
- .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
1500
- margin-bottom: -1px; }
1421
+ .dashboard-tile-play-button span.react-autoql-icon svg {
1422
+ cursor: pointer;
1423
+ width: 25px;
1424
+ height: 33px;
1425
+ margin-left: 10px;
1426
+ color: var(--react-autoql-accent-color); }
1501
1427
 
1502
- .react-autoql-step-container a {
1503
- color: var(--react-autoql-accent-color, #26a7df); }
1428
+ .dashboard-tile-play-button.disabled svg {
1429
+ opacity: 0.5;
1430
+ cursor: not-allowed; }
1504
1431
 
1505
- .frequency-date-select-container {
1506
- margin-top: 10px; }
1432
+ .dashboard-tile-play-button:not(.disabled) svg:hover {
1433
+ opacity: 0.8; }
1507
1434
 
1508
- .notification-frequency-step {
1509
- display: flex; }
1510
- .notification-frequency-step .frequency-category-select {
1511
- position: relative;
1512
- padding-top: 9px; }
1513
- .notification-frequency-step .notification-frequency-select {
1514
- margin-left: 8px; }
1515
- .notification-frequency-step .frequency-repeat-checkbox .react-autoql-checkbox-label {
1516
- line-height: 33px; }
1517
- .notification-frequency-step .frequency-repeat-follow-text {
1518
- line-height: 32px;
1519
- vertical-align: top; }
1520
- .notification-frequency-step .frequency-settings-container {
1521
- flex: 0 1 400px; }
1435
+ .dashboard-tile-delete-button {
1436
+ opacity: 0;
1437
+ font-size: 17px;
1438
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1439
+ position: absolute;
1440
+ top: 0px;
1441
+ right: 2px;
1442
+ cursor: pointer;
1443
+ transition: opacity 0.3s ease;
1444
+ z-index: 1; }
1522
1445
 
1523
- .schedule-builder-timezone-section {
1524
- margin: 10px 5px; }
1525
- .schedule-builder-timezone-section .react-autoql-timezone-select {
1526
- display: inline-block;
1527
- width: 300px; }
1446
+ .react-grid-item:hover .dashboard-tile-delete-button {
1447
+ opacity: 1; }
1528
1448
 
1529
- .react-autoql-notification-settings {
1530
- background-color: var(--react-autoql-background-color-secondary);
1531
- color: var(--react-autoql-text-color-primary);
1532
- padding-top: 20px;
1533
- height: 100%; }
1534
- .react-autoql-notification-settings .react-autoql-notification-settings-container {
1535
- margin: 20px;
1536
- margin-top: 10px;
1537
- border-radius: 4px;
1538
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1539
- background-color: var(--react-autoql-background-color-primary);
1540
- overflow: hidden; }
1541
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1542
- height: 55px;
1543
- line-height: 55px;
1544
- transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1545
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1546
- margin-right: 10px;
1547
- cursor: pointer; }
1548
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1549
- padding-right: 20px;
1550
- font-size: 17px;
1551
- opacity: 1;
1552
- cursor: pointer;
1553
- color: var(--react-autoql-accent-color); }
1554
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1555
- background: rgba(0, 0, 0, 0.01); }
1556
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1557
- opacity: 0;
1558
- margin-right: 20px;
1559
- font-size: 16px;
1560
- transition: all 0.2s ease;
1561
- color: var(--react-autoql-text-color-primary);
1562
- cursor: pointer; }
1563
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1564
- color: var(--react-autoql-accent-color);
1565
- opacity: 1 !important; }
1566
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1567
- opacity: 0.5; }
1568
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1569
- display: flex;
1570
- justify-content: space-between;
1571
- height: 56px;
1572
- padding-left: 25px;
1573
- padding-right: 8px;
1574
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1575
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1576
- margin-bottom: 4px;
1577
- margin-right: 8px; }
1578
- .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1579
- margin-bottom: 4px;
1580
- margin-right: 8px;
1581
- opacity: 0.5;
1582
- pointer-events: none; }
1583
- .react-autoql-notification-settings .react-autoql-notification-title-container {
1584
- display: flex;
1585
- justify-content: space-between;
1586
- align-items: center;
1587
- padding: 5px 20px;
1588
- padding-bottom: 0;
1589
- color: var(--react-autoql-text-color-primary); }
1590
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1591
- display: inline-block;
1592
- height: 35px;
1593
- width: 35px;
1594
- border-radius: 20px;
1595
- background: var(--react-autoql-accent-color, #26a7df);
1596
- color: white;
1597
- line-height: 38px;
1598
- text-align: center;
1599
- font-size: 20px;
1600
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1601
- transition: all 0.2s ease;
1602
- margin-right: 5px;
1603
- cursor: pointer; }
1604
- .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1605
- box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1606
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1607
- white-space: nowrap;
1608
- overflow: hidden;
1609
- text-overflow: ellipsis;
1610
- padding-right: 10px; }
1611
- .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1612
- opacity: 0.5; }
1613
- .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1614
- vertical-align: middle;
1615
- margin-bottom: 4px;
1616
- height: 18px; }
1617
- .react-autoql-notification-settings .react-autoql-re-initialize-btn-text {
1618
- display: flex;
1619
- align-items: center;
1620
- margin-top: -25px; }
1621
-
1622
- .notification-list-loading-container {
1623
- text-align: center;
1624
- padding-top: 100px;
1625
- color: var(--react-autoql-text-color-primary);
1449
+ .dashboard-tile-loading-container {
1450
+ display: flex;
1626
1451
  height: 100%;
1627
- overflow: hidden;
1628
- background: var(--react-autoql-background-color-secondary); }
1452
+ width: 100%;
1453
+ padding: 20px;
1454
+ align-items: center;
1455
+ justify-content: center; }
1629
1456
 
1630
- .empty-notifications-message {
1631
- color: var(--react-autoql-text-color-primary);
1632
- text-align: center;
1633
- margin-top: 75px; }
1634
- .empty-notifications-message div {
1635
- opacity: 0.6; }
1636
- .empty-notifications-message .empty-notifications-title {
1637
- font-size: 16px;
1638
- font-weight: bold;
1639
- margin-bottom: 5px; }
1640
- .empty-notifications-message .empty-notifications-img {
1641
- width: 250px;
1642
- height: 250px; }
1457
+ .dashboard-tile-title-divider {
1458
+ height: 2px;
1459
+ background: currentColor;
1460
+ width: 75px;
1461
+ margin-top: 4px;
1462
+ opacity: 0.07; }
1643
1463
 
1644
- .react-autoql-notification-list-container {
1464
+ /* Input box styling for edit mode */
1465
+ .dashboard-tile-input-container {
1466
+ display: flex;
1467
+ width: 100%;
1645
1468
  height: 100%;
1646
- padding: 20px;
1647
- overflow-y: auto;
1648
- background: var(--react-autoql-background-color-secondary); }
1649
-
1650
- .react-autoql-notification-dismiss-all {
1651
- text-align: right;
1652
- margin-bottom: 12px;
1653
- padding-right: 10px;
1654
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1655
- transition: color 0.1s ease; }
1656
- .react-autoql-notification-dismiss-all span {
1657
- opacity: 0.8;
1658
- cursor: pointer; }
1659
- .react-autoql-notification-dismiss-all span:hover {
1660
- opacity: 1; }
1469
+ font-size: 15px; }
1470
+ .dashboard-tile-input-container .dashboard-tile-input,
1471
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1472
+ width: 100%;
1473
+ height: 100%;
1474
+ padding: 12px;
1475
+ padding-left: 33px;
1476
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1477
+ outline: none !important;
1478
+ color: var(--react-autoql-text-color-primary, #356f90);
1479
+ background: var(--react-autoql-background-color-primary, #fff); }
1661
1480
 
1662
- .react-autoql-notification-display-name-input {
1663
- width: 100%; }
1481
+ .query-focused .dashboard-tile-left-input-container,
1482
+ .title-focused .dashboard-tile-right-input-container {
1483
+ width: 70%; }
1664
1484
 
1665
- .react-autoql-notification-message-input {
1666
- width: 100%; }
1485
+ .dashboard-tile-right-input-container {
1486
+ z-index: 2; }
1667
1487
 
1668
- .react-autoql-notification-list-item:nth-of-type(0) {
1669
- -webkit-animation-delay: 0s;
1670
- animation-delay: 0s; }
1488
+ .dashboard-tile-right-input-container,
1489
+ .dashboard-tile-left-input-container {
1490
+ position: relative;
1491
+ width: 0;
1492
+ flex-grow: 1;
1493
+ transition: width 0.3s ease; }
1494
+ .dashboard-tile-right-input-container .query-input-icon,
1495
+ .dashboard-tile-right-input-container .title-input-icon,
1496
+ .dashboard-tile-left-input-container .query-input-icon,
1497
+ .dashboard-tile-left-input-container .title-input-icon {
1498
+ color: var(--react-autoql-accent-color);
1499
+ position: absolute;
1500
+ pointer-events: none;
1501
+ z-index: 1; }
1502
+ .dashboard-tile-right-input-container .query-input-icon,
1503
+ .dashboard-tile-left-input-container .query-input-icon {
1504
+ font-size: 18px;
1505
+ top: 4px;
1506
+ left: 10px; }
1507
+ .dashboard-tile-right-input-container .title-input-icon,
1508
+ .dashboard-tile-left-input-container .title-input-icon {
1509
+ font-size: 16px;
1510
+ top: 7px;
1511
+ left: 11px; }
1671
1512
 
1672
- .react-autoql-notification-list-item:nth-of-type(1) {
1673
- -webkit-animation-delay: 0.1s;
1674
- animation-delay: 0.1s; }
1513
+ .dashboard-tile-input.second.query {
1514
+ transition: all 0.3s ease;
1515
+ border: 1px solid transparent;
1516
+ outline: none !important;
1517
+ color: var(--react-autoql-text-color-primary, #356f90);
1518
+ background: var(--react-autoql-background-color-primary);
1519
+ margin: 0px;
1520
+ padding: 0px;
1521
+ width: 0px;
1522
+ height: 28px;
1523
+ pointer-events: none; }
1524
+ .dashboard-tile-input.second.query.open {
1525
+ width: 200px;
1526
+ padding: 12px;
1527
+ margin-left: 5px;
1528
+ border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1529
+ pointer-events: unset; }
1675
1530
 
1676
- .react-autoql-notification-list-item:nth-of-type(2) {
1677
- -webkit-animation-delay: 0.2s;
1678
- animation-delay: 0.2s; }
1531
+ .dashboard-tile-input:hover,
1532
+ .dashboard-tile-input:focus,
1533
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
1534
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
1535
+ border: 1px solid #26a7e9 !important;
1536
+ border-color: var(--react-autoql-accent-color) !important; }
1679
1537
 
1680
- .react-autoql-notification-list-item:nth-of-type(3) {
1681
- -webkit-animation-delay: 0.3s;
1682
- animation-delay: 0.3s; }
1538
+ .dashboard-tile-input-container .dashboard-tile-input.query,
1539
+ .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1540
+ padding-left: 36px;
1541
+ border-top-left-radius: 4px;
1542
+ border-bottom-left-radius: 4px; }
1683
1543
 
1684
- .react-autoql-notification-list-item:nth-of-type(4) {
1685
- -webkit-animation-delay: 0.4s;
1686
- animation-delay: 0.4s; }
1544
+ .dashboard-tile-input-container .dashboard-tile-input.title {
1545
+ border-left: none;
1546
+ border-top-right-radius: 4px;
1547
+ border-bottom-right-radius: 4px;
1548
+ z-index: 2; }
1687
1549
 
1688
- .react-autoql-notification-list-item:nth-of-type(5) {
1689
- -webkit-animation-delay: 0.5s;
1690
- animation-delay: 0.5s; }
1550
+ .dashboard-tile-input-container .dashboard-tile-input.title:hover,
1551
+ .dashboard-tile-input-container .dashboard-tile-input.title:focus,
1552
+ .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
1553
+ .dashboard-tile-right-input-container:hover .dashboard-tile-input {
1554
+ /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
1555
+ margin-left: -2px; }
1691
1556
 
1692
- .react-autoql-notification-list-item:nth-of-type(6) {
1693
- -webkit-animation-delay: 0.6s;
1694
- animation-delay: 0.6s; }
1557
+ /* Autocomplete styles */
1558
+ .dashboard-tile-input-container .react-autosuggest__container {
1559
+ position: relative;
1560
+ width: 100%;
1561
+ height: 100%;
1562
+ padding: 0;
1563
+ margin: 0; }
1695
1564
 
1696
- .react-autoql-notification-list-item:nth-of-type(7) {
1697
- -webkit-animation-delay: 0.7s;
1698
- animation-delay: 0.7s; }
1565
+ .dashboard-tile-input-container
1566
+ .react-autosuggest__suggestions-container--open {
1567
+ background-color: var(--react-autoql-background-color-primary);
1568
+ border: 1px solid var(--react-autoql-border-color);
1569
+ color: var(--react-autoql-text-color-primary); }
1699
1570
 
1700
- .react-autoql-notification-list-item:nth-of-type(8) {
1701
- -webkit-animation-delay: 0.8s;
1702
- animation-delay: 0.8s; }
1571
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
1572
+ color: var(--react-autoql-text-color-primary); }
1703
1573
 
1704
- .react-autoql-notification-list-item:nth-of-type(9) {
1705
- -webkit-animation-delay: 0.9s;
1706
- animation-delay: 0.9s; }
1574
+ .dashboard-tile-input-container input::-moz-placeholder {
1575
+ opacity: 0.5; }
1707
1576
 
1708
- .react-autoql-notification-list-item:nth-of-type(10) {
1709
- -webkit-animation-delay: 1s;
1710
- animation-delay: 1s; }
1577
+ .dashboard-tile-input-container input:-ms-input-placeholder {
1578
+ opacity: 0.5; }
1711
1579
 
1712
- @-webkit-keyframes slideIn {
1713
- 0% {
1714
- opacity: 0;
1715
- top: 500px; }
1716
- 100% {
1717
- opacity: 1;
1718
- top: 0; } }
1580
+ .dashboard-tile-input-container input::placeholder {
1581
+ opacity: 0.5; }
1719
1582
 
1720
- .react-autoql-dashboard .react-grid-item {
1721
- background: var(--react-autoql-background-color-primary, #fff);
1722
- color: var(--react-autoql-text-color-primary, #404040);
1723
- font-family: var(--react-autoql-font-family), sans-serif;
1583
+ .react-autoql-dashboard .edit-mode-placeholder-icon {
1584
+ display: inline-block;
1585
+ line-height: 22px;
1586
+ vertical-align: middle;
1587
+ height: 23px; }
1588
+
1589
+ .dashboard-tile-input-container
1590
+ .react-autosuggest__suggestions-container--open {
1591
+ position: absolute;
1592
+ bottom: unset;
1593
+ padding-top: 5px;
1594
+ padding-bottom: 5px;
1595
+ display: block;
1596
+ height: unset;
1597
+ border-radius: 24px;
1598
+ font-family: inherit;
1599
+ font-size: 15px;
1600
+ font-weight: normal;
1601
+ z-index: 2;
1724
1602
  overflow: hidden;
1603
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1604
+ text-align: left;
1605
+ width: 100%;
1606
+ top: 35px;
1725
1607
  border-radius: 4px;
1726
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13); }
1608
+ margin: 0; }
1727
1609
 
1728
- .react-autoql-dashboard-tile-inner-div {
1610
+ .dashboard-tile-input-container .react-autosuggest__suggestions-list {
1611
+ margin: 0;
1612
+ padding: 0;
1613
+ list-style-type: none; }
1614
+
1615
+ .dashboard-tile-input-container .react-autosuggest__suggestion {
1616
+ cursor: pointer;
1617
+ padding: 2px;
1618
+ padding-left: 18px;
1619
+ letter-spacing: 0.05em;
1620
+ line-height: 22.5px; }
1621
+
1622
+ .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
1623
+ background-color: rgba(0, 0, 0, 0.1) !important; }
1624
+
1625
+ .dashboard-tile-input-container .react-autosuggest__section-title {
1626
+ padding: 10px 0 0 10px;
1627
+ font-size: 12px;
1628
+ color: #777; }
1629
+
1630
+ /* Dragging placeholder styles */
1631
+ .react-autoql-db-dragging-placeholder-container {
1729
1632
  height: 100%;
1730
1633
  width: 100%;
1731
- background: inherit;
1732
- position: relative;
1733
- text-align: center;
1634
+ padding: 20px 30px;
1734
1635
  display: flex;
1735
- justify-content: flex-start;
1736
- flex-direction: column;
1737
- align-items: center; }
1738
-
1739
- .dashboard-data-limit-warning-icon {
1740
- color: var(--react-autoql-warning-color) !important;
1741
- position: absolute !important;
1742
- bottom: 40px;
1743
- right: 16px;
1744
- font-size: 20px; }
1636
+ flex-direction: column; }
1745
1637
 
1746
- .react-autoql-dashboard-tile-drag-handle {
1747
- transition: opacity 0.3s ease;
1748
- position: absolute;
1749
- background-color: var(--react-autoql-border-color, #f7f7f7);
1750
- cursor: move;
1751
- opacity: 0; }
1752
- .react-autoql-dashboard-tile-drag-handle.top {
1753
- top: 0;
1754
- left: 0;
1755
- width: 100%;
1756
- height: 15px; }
1757
- .react-autoql-dashboard-tile-drag-handle.bottom {
1758
- bottom: 0;
1759
- left: 0;
1760
- width: 100%;
1761
- height: 15px; }
1762
- .react-autoql-dashboard-tile-drag-handle.left {
1763
- top: 0;
1764
- left: 0;
1765
- width: 15px;
1766
- height: 100%; }
1767
- .react-autoql-dashboard-tile-drag-handle.right {
1768
- top: 0;
1769
- right: 0;
1770
- width: 15px;
1771
- height: 100%; }
1638
+ .react-autoql-db-dragging-placeholder-title {
1639
+ width: 100%;
1640
+ height: 35px;
1641
+ background: #f3f3f3;
1642
+ border-top-right-radius: 4px;
1643
+ border-top-left-radius: 4px;
1644
+ flex-shrink: 0;
1645
+ flex-grow: 0; }
1772
1646
 
1773
- .react-autoql-dashboard-tile:hover .react-autoql-dashboard-tile-drag-handle {
1774
- opacity: 1; }
1647
+ .react-autoql-db-dragging-placeholder-content {
1648
+ width: 100%;
1649
+ height: 100%;
1650
+ background: #f9f9f9;
1651
+ border-bottom-right-radius: 4px;
1652
+ border-bottom-left-radius: 4px; }
1775
1653
 
1776
- .react-autoql-dashboard-tile .autoql-options-toolbar {
1777
- transition: opacity 0.3s ease, color 0.3s ease;
1778
- visibility: hidden;
1779
- opacity: 0;
1780
- bottom: 8px;
1781
- right: 8px;
1782
- z-index: 1; }
1654
+ .dashboard-tile-placeholder-text {
1655
+ font-size: 15px;
1656
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
1657
+ .dashboard-tile-placeholder-text .play-icon {
1658
+ vertical-align: bottom;
1659
+ line-height: 20px; }
1783
1660
 
1784
- .dashboard-tile-viz-toolbar-container {
1785
- transition: opacity 0.3s ease, color 0.3s ease;
1786
- color: var(--react-autoql-accent-color);
1661
+ /* React Grid Layout overrides */
1662
+ .react-grid-item > .react-resizable-handle {
1663
+ z-index: 1;
1787
1664
  position: absolute;
1665
+ width: 25px;
1666
+ height: 25px;
1788
1667
  bottom: 0;
1789
- left: 0;
1790
- padding: 7px;
1791
- z-index: 1;
1792
- opacity: 0;
1793
- visibility: hidden; }
1794
- .dashboard-tile-viz-toolbar-container .viz-toolbar,
1795
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1796
- position: relative;
1797
- display: inline-block;
1798
- background: var(--react-autoql-background-color-primary); }
1799
- .dashboard-tile-viz-toolbar-container .split-view-btn {
1800
- margin-right: 7px; }
1801
- .dashboard-tile-viz-toolbar-container .split-view-btn .react-autoql-icon {
1802
- font-size: 14px; }
1803
-
1804
- .split-view-btn {
1805
- z-index: 1; }
1668
+ right: 0; }
1806
1669
 
1807
- .split-view-query-btn {
1808
- transition: opacity 0.3s ease, color 0.3s ease;
1809
- color: var(--react-autoql-accent-color);
1810
- position: absolute;
1811
- top: 7px;
1812
- left: 7px;
1813
- bottom: unset;
1814
- z-index: 1;
1815
- visibility: hidden;
1816
- opacity: 0; }
1670
+ .react-grid-item > .react-resizable-handle::after {
1671
+ width: 11px !important;
1672
+ height: 11px !important;
1673
+ bottom: 4px;
1674
+ right: 4px;
1675
+ opacity: 0;
1676
+ border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1677
+ border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
1678
+ transition: opacity 0.3s ease; }
1817
1679
 
1818
- .react-autoql-dashboard-tile:hover .dashboard-tile-viz-toolbar-container,
1819
- .react-autoql-dashboard-tile:hover .split-view-query-btn,
1820
- .react-autoql-dashboard-tile:hover .autoql-options-toolbar {
1821
- visibility: visible;
1680
+ .react-grid-item:hover > .react-resizable-handle::after {
1822
1681
  opacity: 1; }
1823
1682
 
1824
- .react-autoql-dashboard-tile-inner-div .single-value-response {
1825
- font-size: 32px;
1826
- margin-top: -6px;
1827
- opacity: 0.9; }
1683
+ .react-grid-placeholder {
1684
+ background: rgba(0, 0, 0, 0.13) !important; }
1828
1685
 
1829
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper {
1830
- height: calc(100% - 47px);
1831
- width: 100%;
1832
- padding-top: 0;
1833
- background: inherit; }
1834
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .query-output-error-message {
1835
- opacity: 0.8; }
1836
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .layout-splitter {
1837
- height: 1px !important;
1838
- color: var(--react-autoql-border-color);
1839
- opacity: 0.3;
1840
- pointer-events: none; }
1841
- .react-autoql-dashboard-tile-inner-div .dashboard-tile-response-wrapper .react-autoql-table {
1842
- opacity: 0.9;
1843
- color: var(--react-autoql-text-color-primary);
1844
- font-size: 11px; }
1686
+ /* This fixes the flickering bug in RGL when resizing elements */
1687
+ .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 {
1688
+ color: inherit; }
1689
+ .react-draggable-transparent-selection input::-moz-placeholder {
1690
+ color: inherit; }
1691
+ .react-draggable-transparent-selection input:-ms-input-placeholder {
1692
+ color: inherit; }
1693
+ .react-draggable-transparent-selection span::selection,
1694
+ .react-draggable-transparent-selection div::selection,
1695
+ .react-draggable-transparent-selection a::selection,
1696
+ .react-draggable-transparent-selection input::selection,
1697
+ .react-draggable-transparent-selection text::selection,
1698
+ .react-draggable-transparent-selection input::placeholder {
1699
+ color: inherit; }
1845
1700
 
1846
- .react-autoql-dashboard-tile-inner-div.split .dashboard-tile-response-wrapper {
1847
- padding: 0; }
1701
+ .dashboard-tile-response-container .layout-pane-primary {
1702
+ overflow: hidden; }
1848
1703
 
1849
- .react-autoql-dashboard-tile-inner-div
1850
- .dashboard-tile-response-wrapper.editing .layout-splitter {
1851
- display: block;
1852
- pointer-events: unset;
1853
- height: 4px !important;
1854
- color: var(--react-autoql-text-color-primary);
1855
- opacity: 0.8; }
1704
+ .splitter-layout,
1705
+ .layout-pane,
1706
+ .dashboard-tile-split-pane-container,
1707
+ .react-autoql-dashboard-drilldown-original {
1708
+ display: flex;
1709
+ align-items: stretch;
1710
+ justify-content: center;
1711
+ width: 100%; }
1856
1712
 
1857
- /* Safetynet styles specific to dashboard tiles */
1858
- .react-autoql-dashboard-tile-inner-div
1859
- .dashboard-tile-response-wrapper.editing {
1860
- height: 100%;
1861
- width: 100%;
1862
- overflow-x: auto;
1863
- overflow-y: hidden; }
1864
-
1865
- .react-autoql-dashboard-tile-inner-div .react-autoql-query-validation-query {
1866
- white-space: nowrap; }
1867
-
1868
- .dashboard-tile-response-wrapper.small
1869
- .react-autoql-query-validation-description,
1870
- .dashboard-tile-response-wrapper.small
1871
- .react-autoql-suggestion-message-description,
1872
- .dashboard-tile-response-wrapper.small
1873
- .react-autoql-query-validation-execute-btn {
1874
- display: none; }
1713
+ .dashboard-tile-response-container .splitter-layout,
1714
+ .dashboard-tile-response-container .layout-pane,
1715
+ .dashboard-tile-response-container .dashboard-tile-split-pane-container {
1716
+ background: inherit; }
1875
1717
 
1876
- .dashboard-tile-response-wrapper .dashboard-tile-response-container {
1718
+ .react-autoql-notifications-button-container {
1877
1719
  position: relative;
1878
- height: 100%;
1879
- width: 100%;
1880
- background: inherit;
1881
- cursor: default; }
1882
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-table-container {
1883
- padding: 20px;
1884
- padding-top: 15px;
1885
- width: 100%; }
1886
- .dashboard-tile-response-wrapper .dashboard-tile-response-container .react-autoql-response-content-container {
1887
- padding: 7px; }
1888
-
1889
- .dashboard-tile-title-container {
1890
- width: 100%;
1891
- text-align: left;
1892
- padding: 19px 25px 0 25px;
1893
- height: 47px;
1894
- white-space: nowrap;
1895
- overflow: hidden;
1896
- text-overflow: ellipsis;
1897
- flex-shrink: 0;
1898
- flex-grow: 0; }
1899
- .dashboard-tile-title-container .dashboard-tile-title {
1900
- color: var(--react-autoql-accent-color, #26a7df); }
1901
-
1902
- .dashboard-tile-title-container .dashboard-tile-title {
1903
- font-weight: bold;
1904
- font-size: 14px; }
1905
-
1906
- .dashboard-tile-edit-wrapper {
1907
- display: flex;
1908
- width: 100%;
1909
- height: 55px;
1910
- padding: 20px 20px 0 25px;
1911
- flex-shrink: 0;
1912
- flex-grow: 0; }
1913
-
1914
- .dashboard-tile-play-button {
1915
- cursor: default;
1916
- flex-grow: 0;
1917
- flex-shrink: 0; }
1918
-
1919
- .dashboard-tile-play-button span.react-autoql-icon svg {
1920
- cursor: pointer;
1921
- width: 25px;
1922
- height: 33px;
1923
- margin-left: 10px;
1924
- color: var(--react-autoql-accent-color); }
1720
+ display: inline-block;
1721
+ font-size: inherit;
1722
+ line-height: 1em;
1723
+ width: 1em; }
1724
+ .react-autoql-notifications-button-container .react-autoql-notifications-button {
1725
+ font-size: 1em;
1726
+ line-height: 0;
1727
+ vertical-align: bottom; }
1728
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge {
1729
+ position: absolute;
1730
+ border: 2px solid #fff;
1731
+ background: #f5222d;
1732
+ border-radius: 6.3em;
1733
+ line-height: 1.3em;
1734
+ left: 0.6em;
1735
+ top: -0.8em;
1736
+ padding: 0.15em 0.5em;
1737
+ text-align: center;
1738
+ color: white;
1739
+ font-size: 0.5em; }
1740
+ .react-autoql-notifications-button-container .react-autoql-notifications-badge-dot {
1741
+ position: absolute;
1742
+ display: inline-block;
1743
+ border: 2px solid #fff;
1744
+ background: #f5222d;
1745
+ border-radius: 50%;
1746
+ height: 0.6em;
1747
+ width: 0.6em;
1748
+ left: 0.5em;
1749
+ top: -2px; }
1925
1750
 
1926
- .dashboard-tile-play-button.disabled svg {
1927
- opacity: 0.5;
1928
- cursor: not-allowed; }
1751
+ .notification-rule-outer-container {
1752
+ position: relative;
1753
+ border: 1px solid transparent;
1754
+ border-radius: 4px;
1755
+ padding-bottom: 5px; }
1929
1756
 
1930
- .dashboard-tile-play-button:not(.disabled) svg:hover {
1931
- opacity: 0.8; }
1757
+ .expression-error-message {
1758
+ padding-left: 5px; }
1932
1759
 
1933
- .dashboard-tile-delete-button {
1934
- opacity: 0;
1935
- font-size: 17px;
1936
- color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
1937
- position: absolute;
1938
- top: 0px;
1939
- right: 2px;
1940
- cursor: pointer;
1941
- transition: opacity 0.3s ease;
1942
- z-index: 1; }
1760
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
1761
+ border: none; }
1943
1762
 
1944
- .react-grid-item:hover .dashboard-tile-delete-button {
1945
- opacity: 1; }
1763
+ .notification-modal-content .react-autoql-step-content p {
1764
+ margin-bottom: 0.5em;
1765
+ margin-top: 0.5em;
1766
+ padding-left: 8px; }
1946
1767
 
1947
- .dashboard-tile-loading-container {
1768
+ .notification-modal-content .step-btn-container {
1769
+ text-align: right;
1948
1770
  display: flex;
1949
- height: 100%;
1950
- width: 100%;
1951
- padding: 20px;
1952
- align-items: center;
1953
- justify-content: center; }
1771
+ min-height: 50px; }
1954
1772
 
1955
- .dashboard-tile-title-divider {
1956
- height: 2px;
1957
- background: currentColor;
1958
- width: 75px;
1959
- margin-top: 4px;
1960
- opacity: 0.07; }
1773
+ .expression-valid-checkmark.react-autoql-icon svg {
1774
+ color: var(--react-autoql-success-color); }
1961
1775
 
1962
- /* Input box styling for edit mode */
1963
- .dashboard-tile-input-container {
1776
+ .expression-invalid-message-container {
1777
+ max-width: 75%;
1778
+ float: left;
1779
+ text-align: left !important;
1964
1780
  display: flex;
1965
- width: 100%;
1966
- height: 100%;
1967
- font-size: 15px; }
1968
- .dashboard-tile-input-container .dashboard-tile-input,
1969
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
1970
- width: 100%;
1971
- height: 100%;
1972
- padding: 12px;
1973
- padding-left: 33px;
1974
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1975
- outline: none !important;
1976
- color: var(--react-autoql-text-color-primary, #356f90);
1977
- background: var(--react-autoql-background-color-primary, #fff); }
1978
-
1979
- .query-focused .dashboard-tile-left-input-container,
1980
- .title-focused .dashboard-tile-right-input-container {
1981
- width: 70%; }
1982
-
1983
- .dashboard-tile-right-input-container {
1984
- z-index: 2; }
1985
-
1986
- .dashboard-tile-right-input-container,
1987
- .dashboard-tile-left-input-container {
1988
- position: relative;
1989
- width: 0;
1990
- flex-grow: 1;
1991
- transition: width 0.3s ease; }
1992
- .dashboard-tile-right-input-container .query-input-icon,
1993
- .dashboard-tile-right-input-container .title-input-icon,
1994
- .dashboard-tile-left-input-container .query-input-icon,
1995
- .dashboard-tile-left-input-container .title-input-icon {
1996
- color: var(--react-autoql-accent-color);
1997
- position: absolute;
1998
- pointer-events: none;
1999
- z-index: 1; }
2000
- .dashboard-tile-right-input-container .query-input-icon,
2001
- .dashboard-tile-left-input-container .query-input-icon {
2002
- font-size: 18px;
2003
- top: 4px;
2004
- left: 10px; }
2005
- .dashboard-tile-right-input-container .title-input-icon,
2006
- .dashboard-tile-left-input-container .title-input-icon {
2007
- font-size: 16px;
2008
- top: 7px;
2009
- left: 11px; }
2010
-
2011
- .dashboard-tile-input.second.query {
2012
- transition: all 0.3s ease;
2013
- border: 1px solid transparent;
2014
- outline: none !important;
2015
- color: var(--react-autoql-text-color-primary, #356f90);
2016
- background: var(--react-autoql-background-color-primary);
2017
- margin: 0px;
2018
- padding: 0px;
2019
- width: 0px;
2020
- height: 28px;
2021
- pointer-events: none; }
2022
- .dashboard-tile-input.second.query.open {
2023
- width: 200px;
2024
- padding: 12px;
2025
- margin-left: 5px;
2026
- border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
2027
- pointer-events: unset; }
2028
-
2029
- .dashboard-tile-input:hover,
2030
- .dashboard-tile-input:focus,
2031
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:hover,
2032
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input:focus {
2033
- border: 1px solid #26a7e9 !important;
2034
- border-color: var(--react-autoql-accent-color) !important; }
2035
-
2036
- .dashboard-tile-input-container .dashboard-tile-input.query,
2037
- .dashboard-tile-input-container .dashboard-tile-autocomplete-input {
2038
- padding-left: 36px;
2039
- border-top-left-radius: 4px;
2040
- border-bottom-left-radius: 4px; }
2041
-
2042
- .dashboard-tile-input-container .dashboard-tile-input.title {
2043
- border-left: none;
2044
- border-top-right-radius: 4px;
2045
- border-bottom-right-radius: 4px;
2046
- z-index: 2; }
2047
-
2048
- .dashboard-tile-input-container .dashboard-tile-input.title:hover,
2049
- .dashboard-tile-input-container .dashboard-tile-input.title:focus,
2050
- .title-focused .dashboard-tile-right-input-container .dashboard-tile-input,
2051
- .dashboard-tile-right-input-container:hover .dashboard-tile-input {
2052
- /* This is done to balance it because we add a 1px left border when the input is focused or hovered */
2053
- margin-left: -2px; }
1781
+ flex-direction: row;
1782
+ align-items: left;
1783
+ justify-content: left; }
2054
1784
 
2055
- /* Autocomplete styles */
2056
- .dashboard-tile-input-container .react-autosuggest__container {
2057
- position: relative;
2058
- width: 100%;
2059
- height: 100%;
2060
- padding: 0;
2061
- margin: 0; }
1785
+ .expression-invalid-message {
1786
+ color: var(--react-autoql-danger-color);
1787
+ display: 'inline-block'; }
2062
1788
 
2063
- .dashboard-tile-input-container
2064
- .react-autosuggest__suggestions-container--open {
2065
- background-color: var(--react-autoql-background-color-primary);
2066
- border: 1px solid var(--react-autoql-border-color);
2067
- color: var(--react-autoql-text-color-primary); }
2068
-
2069
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2070
- color: var(--react-autoql-text-color-primary); }
2071
-
2072
- .dashboard-tile-input-container input::-moz-placeholder {
2073
- opacity: 0.5; }
2074
-
2075
- .dashboard-tile-input-container input:-ms-input-placeholder {
2076
- opacity: 0.5; }
2077
-
2078
- .dashboard-tile-input-container input::placeholder {
2079
- opacity: 0.5; }
2080
-
2081
- .react-autoql-dashboard .edit-mode-placeholder-icon {
2082
- display: inline-block;
2083
- line-height: 22px;
2084
- vertical-align: middle;
2085
- height: 23px; }
1789
+ .react-autoql-notification-settings {
1790
+ background-color: var(--react-autoql-background-color-secondary);
1791
+ color: var(--react-autoql-text-color-primary);
1792
+ padding-top: 20px;
1793
+ height: 100%; }
1794
+ .react-autoql-notification-settings .react-autoql-notification-settings-container {
1795
+ margin: 20px;
1796
+ margin-top: 10px;
1797
+ border-radius: 4px;
1798
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1799
+ background-color: var(--react-autoql-background-color-primary);
1800
+ overflow: hidden; }
1801
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item {
1802
+ height: 55px;
1803
+ line-height: 55px;
1804
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1); }
1805
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-error-status-icon {
1806
+ margin-right: 10px;
1807
+ cursor: pointer; }
1808
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .reset-period-info-icon {
1809
+ padding-right: 20px;
1810
+ font-size: 17px;
1811
+ opacity: 1;
1812
+ cursor: pointer;
1813
+ color: var(--react-autoql-accent-color); }
1814
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item.CUSTOM:hover {
1815
+ background: rgba(0, 0, 0, 0.01); }
1816
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn {
1817
+ opacity: 0;
1818
+ margin-right: 20px;
1819
+ font-size: 16px;
1820
+ transition: all 0.2s ease;
1821
+ color: var(--react-autoql-text-color-primary);
1822
+ cursor: pointer; }
1823
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item .react-autoql-notification-action-btn:hover {
1824
+ color: var(--react-autoql-accent-color);
1825
+ opacity: 1 !important; }
1826
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item:hover .react-autoql-notification-action-btn {
1827
+ opacity: 0.5; }
1828
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-setting-item-header {
1829
+ display: flex;
1830
+ justify-content: space-between;
1831
+ height: 56px;
1832
+ padding-left: 25px;
1833
+ padding-right: 8px;
1834
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1835
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-enable-checkbox {
1836
+ margin-bottom: 4px;
1837
+ margin-right: 8px; }
1838
+ .react-autoql-notification-settings .react-autoql-notification-settings-container .react-autoql-notification-disable-checkbox {
1839
+ margin-bottom: 4px;
1840
+ margin-right: 8px;
1841
+ opacity: 0.5;
1842
+ pointer-events: none; }
1843
+ .react-autoql-notification-settings .react-autoql-notification-title-container {
1844
+ display: flex;
1845
+ justify-content: space-between;
1846
+ align-items: center;
1847
+ padding: 5px 20px;
1848
+ padding-bottom: 0;
1849
+ color: var(--react-autoql-text-color-primary); }
1850
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn {
1851
+ display: inline-block;
1852
+ height: 35px;
1853
+ width: 35px;
1854
+ border-radius: 20px;
1855
+ background: var(--react-autoql-accent-color, #26a7df);
1856
+ color: white;
1857
+ line-height: 38px;
1858
+ text-align: center;
1859
+ font-size: 20px;
1860
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1861
+ transition: all 0.2s ease;
1862
+ margin-right: 5px;
1863
+ cursor: pointer; }
1864
+ .react-autoql-notification-settings .react-autoql-notification-title-container .react-autoql-notification-add-btn:hover {
1865
+ box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.32); }
1866
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name {
1867
+ white-space: nowrap;
1868
+ overflow: hidden;
1869
+ text-overflow: ellipsis;
1870
+ padding-right: 10px; }
1871
+ .react-autoql-notification-settings .react-autoql-notification-setting-display-name .react-autoql-notification-setting-display-name-message {
1872
+ opacity: 0.5; }
1873
+ .react-autoql-notification-settings .react-autoql-re-initialize-btn {
1874
+ vertical-align: middle;
1875
+ margin-bottom: 4px;
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; }
2086
1881
 
2087
- .dashboard-tile-input-container
2088
- .react-autosuggest__suggestions-container--open {
2089
- position: absolute;
2090
- bottom: unset;
2091
- padding-top: 5px;
2092
- padding-bottom: 5px;
2093
- display: block;
2094
- height: unset;
2095
- border-radius: 24px;
2096
- font-family: inherit;
2097
- font-size: 15px;
2098
- font-weight: normal;
2099
- z-index: 2;
1882
+ .react-autoql-notification-list-item {
1883
+ display: flex;
1884
+ flex-direction: column;
1885
+ flex-basis: auto;
1886
+ --accent-color: #26a7df;
1887
+ position: relative;
2100
1888
  overflow: hidden;
2101
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2102
- text-align: left;
2103
- width: 100%;
2104
- top: 35px;
1889
+ background: var(--react-autoql-background-color-primary, #fff);
2105
1890
  border-radius: 4px;
2106
- margin: 0; }
2107
-
2108
- .dashboard-tile-input-container .react-autosuggest__suggestions-list {
2109
- margin: 0;
2110
- padding: 0;
2111
- list-style-type: none; }
2112
-
2113
- .dashboard-tile-input-container .react-autosuggest__suggestion {
2114
- cursor: pointer;
2115
- padding: 2px;
2116
- padding-left: 18px;
2117
- letter-spacing: 0.05em;
2118
- line-height: 22.5px; }
1891
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
1892
+ margin-bottom: 8px;
1893
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1894
+ font-family: var(--react-autoql-font-family), sans-serif;
1895
+ transition: all 1s ease;
1896
+ transition: height 0.3s cubic-bezier(0.26, 0.26, 0, 1);
1897
+ -webkit-animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1898
+ animation: slideIn 0.5s cubic-bezier(0.26, 0.26, 0, 1);
1899
+ -webkit-animation-fill-mode: both;
1900
+ animation-fill-mode: both;
1901
+ -webkit-animation-delay: 0s;
1902
+ animation-delay: 0s; }
1903
+ .react-autoql-notification-list-item .single-value-response {
1904
+ font-size: 32px;
1905
+ margin-top: -6px;
1906
+ opacity: 0.9; }
1907
+ .react-autoql-notification-list-item .viz-toolbar {
1908
+ position: relative;
1909
+ border: none; }
1910
+ .react-autoql-notification-list-item .viz-toolbar .react-autoql-toolbar-btn {
1911
+ height: 33px; }
1912
+ .react-autoql-notification-list-item .react-autoql-notification-details-title {
1913
+ font-weight: 600;
1914
+ padding-top: 20px;
1915
+ padding-bottom: 5px; }
1916
+ .react-autoql-notification-list-item.expanded .react-autoql-notification-list-item-header {
1917
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.04)); }
1918
+ .react-autoql-notification-list-item .react-autoql-notification-details {
1919
+ overflow: hidden; }
1920
+ .react-autoql-notification-list-item.animation-complete .react-autoql-notification-details {
1921
+ overflow: auto; }
1922
+ .react-autoql-notification-list-item:hover:not(.expanded) {
1923
+ background-color: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.01)); }
1924
+ .react-autoql-notification-list-item:hover .react-autoql-notification-delete-icon {
1925
+ opacity: 1; }
1926
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-display-name {
1927
+ color: var(--react-autoql-accent-color, #26a7df) !important; }
1928
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-dismiss-btn {
1929
+ margin-top: 3px;
1930
+ color: var(--react-autoql-accent-color, #26a7df); }
1931
+ .react-autoql-notification-list-item.triggered .react-autoql-notification-alert-strip {
1932
+ opacity: 1; }
1933
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content {
1934
+ display: flex;
1935
+ flex-direction: column;
1936
+ justify-content: stretch;
1937
+ transition: height 0.2s ease;
1938
+ height: 0;
1939
+ opacity: 0; }
1940
+ .react-autoql-notification-list-item .react-autoql-notification-expanded-content.visible {
1941
+ height: 400px;
1942
+ opacity: 1; }
1943
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content {
1944
+ flex: 0;
1945
+ flex-basis: 55px;
1946
+ text-align: center;
1947
+ padding: 8px;
1948
+ border-top: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1949
+ .react-autoql-notification-list-item .react-autoql-notification-extra-content .notification-deleted-text {
1950
+ line-height: 40px;
1951
+ opacity: 0.6;
1952
+ font-style: italic; }
1953
+ .react-autoql-notification-list-item .react-autoql-notification-description {
1954
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.6));
1955
+ opacity: 0.8;
1956
+ font-size: 14px; }
1957
+ .react-autoql-notification-list-item .react-autoql-notification-list-item-header {
1958
+ display: flex;
1959
+ flex-direction: row;
1960
+ justify-content: space-between;
1961
+ padding-left: 22px;
1962
+ cursor: pointer; }
1963
+ .react-autoql-notification-list-item .react-autoql-notification-query-title {
1964
+ flex: 0 0 auto;
1965
+ font-size: 14px;
1966
+ font-family: inherit;
1967
+ color: currentcolor;
1968
+ opacity: 0.9;
1969
+ font-weight: 600;
1970
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
1971
+ text-align: center;
1972
+ margin: 0 10px;
1973
+ padding-top: 20px;
1974
+ padding-bottom: 7px; }
1975
+ .react-autoql-notification-list-item .react-autoql-notification-details-container {
1976
+ flex: 1;
1977
+ display: flex;
1978
+ flex-direction: row;
1979
+ align-items: stretch;
1980
+ justify-content: stretch;
1981
+ overflow: hidden; }
1982
+ .react-autoql-notification-list-item .react-autoql-notification-details-container .react-autoql-notification-details {
1983
+ flex: 1 1;
1984
+ padding: 20px;
1985
+ padding-top: 0;
1986
+ opacity: 0.9;
1987
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
1988
+ .react-autoql-notification-list-item .react-autoql-notification-data-container {
1989
+ display: flex;
1990
+ flex-direction: row;
1991
+ justify-content: stretch;
1992
+ flex: 3 3 0px;
1993
+ overflow: hidden; }
1994
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-notificaton-chart-container {
1995
+ flex: 1;
1996
+ height: 100%;
1997
+ width: 0;
1998
+ display: flex;
1999
+ flex-direction: column;
2000
+ padding: 0px 20px 10px 20px; }
2001
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table-container {
2002
+ width: 100%;
2003
+ padding: 0 10px; }
2004
+ .react-autoql-notification-list-item .react-autoql-notification-data-container .react-autoql-table {
2005
+ opacity: 0.9;
2006
+ color: currentColor;
2007
+ font-size: 11px; }
2008
+ .react-autoql-notification-list-item .react-autoql-notification-data-title {
2009
+ line-height: 22px;
2010
+ font-size: 12px;
2011
+ text-align: right;
2012
+ color: var(--react-autoql-text-color-primary);
2013
+ opacity: 0.5;
2014
+ padding: 8px 20px; }
2015
+ .react-autoql-notification-list-item .react-autoql-notification-data-title span.react-autoql-icon svg {
2016
+ margin-top: -3px;
2017
+ vertical-align: middle; }
2018
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon {
2019
+ font-size: 21px;
2020
+ margin: 11px;
2021
+ width: 40px;
2022
+ height: 40px;
2023
+ padding: 10px;
2024
+ border-radius: 26px;
2025
+ display: inline-block;
2026
+ line-height: 20px;
2027
+ background-color: transparent;
2028
+ transition: background-color 0.2s ease;
2029
+ cursor: pointer; }
2030
+ .react-autoql-notification-list-item .react-autoql-notification-dismiss-icon:hover {
2031
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2032
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon {
2033
+ font-size: 18px;
2034
+ margin-top: 3px;
2035
+ margin-right: 3px;
2036
+ opacity: 0;
2037
+ width: 36px;
2038
+ height: 36px;
2039
+ padding: 9px;
2040
+ border-radius: 20px;
2041
+ display: inline-block;
2042
+ line-height: 20px;
2043
+ background-color: transparent;
2044
+ transition: all 0.2s ease;
2045
+ cursor: pointer; }
2046
+ .react-autoql-notification-list-item .react-autoql-notification-delete-icon:hover {
2047
+ background-color: var(--react-autoql-background-color-secondary, #ececec); }
2048
+ .react-autoql-notification-list-item .react-autoql-notification-alert-icon {
2049
+ position: absolute;
2050
+ top: -7px;
2051
+ left: -7px;
2052
+ color: var(--react-autoql-accent-color, #26a7df);
2053
+ line-height: 10px;
2054
+ background: var(--react-autoql-background-color-primary, #fff);
2055
+ border-radius: 10px;
2056
+ font-size: 17px; }
2057
+ .react-autoql-notification-list-item .react-autoql-notification-alert-strip {
2058
+ height: 100%;
2059
+ opacity: 0;
2060
+ position: absolute;
2061
+ left: 0px;
2062
+ top: 0;
2063
+ width: 4px;
2064
+ background: var(--react-autoql-accent-color, #26a7df);
2065
+ transition-property: opacity;
2066
+ transition-duration: 0.2s;
2067
+ transition-timing-function: ease; }
2068
+ .react-autoql-notification-list-item .react-autoql-notification-viz-switcher {
2069
+ flex: 0 0 50px;
2070
+ padding: 10px;
2071
+ border-left: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05)); }
2072
+ .react-autoql-notification-list-item .react-autoql-notification-img-container {
2073
+ flex: 0 0 60px; }
2074
+ .react-autoql-notification-list-item .react-autoql-notification-img-container .react-autoql-notification-img {
2075
+ border-radius: 50px;
2076
+ height: 45px;
2077
+ width: 45px;
2078
+ line-height: 45px;
2079
+ font-size: 22px;
2080
+ color: white;
2081
+ background-color: var(--react-autoql-accent-color, #26a7df);
2082
+ text-align: center;
2083
+ margin-top: 13px;
2084
+ margin-right: 17px; }
2085
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container {
2086
+ flex: 1;
2087
+ line-height: 23px;
2088
+ padding: 13px 0px;
2089
+ transition: color 0.2s ease; }
2090
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-display-name {
2091
+ font-size: 18px;
2092
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.7)); }
2093
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp {
2094
+ font-size: 12px;
2095
+ opacity: 0.5; }
2096
+ .react-autoql-notification-list-item .react-autoql-notification-display-name-container .react-autoql-notification-timestamp span.react-autoql-icon svg {
2097
+ margin-bottom: -1px; }
2119
2098
 
2120
- .dashboard-tile-input-container .react-autosuggest__suggestion--highlighted {
2121
- background-color: rgba(0, 0, 0, 0.1) !important; }
2099
+ .react-autoql-step-container a {
2100
+ color: var(--react-autoql-accent-color, #26a7df); }
2122
2101
 
2123
- .dashboard-tile-input-container .react-autosuggest__section-title {
2124
- padding: 10px 0 0 10px;
2125
- font-size: 12px;
2126
- color: #777; }
2102
+ .frequency-date-select-container {
2103
+ margin-top: 10px; }
2127
2104
 
2128
- /* Dragging placeholder styles */
2129
- .react-autoql-db-dragging-placeholder-container {
2130
- height: 100%;
2131
- width: 100%;
2132
- padding: 20px 30px;
2133
- display: flex;
2134
- flex-direction: column; }
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; }
2135
2119
 
2136
- .react-autoql-db-dragging-placeholder-title {
2137
- width: 100%;
2138
- height: 35px;
2139
- background: #f3f3f3;
2140
- border-top-right-radius: 4px;
2141
- border-top-left-radius: 4px;
2142
- flex-shrink: 0;
2143
- flex-grow: 0; }
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; }
2144
2125
 
2145
- .react-autoql-db-dragging-placeholder-content {
2146
- width: 100%;
2126
+ .notification-list-loading-container {
2127
+ text-align: center;
2128
+ padding-top: 100px;
2129
+ color: var(--react-autoql-text-color-primary);
2147
2130
  height: 100%;
2148
- background: #f9f9f9;
2149
- border-bottom-right-radius: 4px;
2150
- border-bottom-left-radius: 4px; }
2151
-
2152
- .dashboard-tile-placeholder-text {
2153
- font-size: 15px;
2154
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.3)); }
2155
- .dashboard-tile-placeholder-text .play-icon {
2156
- vertical-align: bottom;
2157
- line-height: 20px; }
2158
-
2159
- /* React Grid Layout overrides */
2160
- .react-grid-item > .react-resizable-handle {
2161
- z-index: 1;
2162
- position: absolute;
2163
- width: 25px;
2164
- height: 25px;
2165
- bottom: 0;
2166
- right: 0; }
2167
-
2168
- .react-grid-item > .react-resizable-handle::after {
2169
- width: 11px !important;
2170
- height: 11px !important;
2171
- bottom: 4px;
2172
- right: 4px;
2173
- opacity: 0;
2174
- border-right: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2175
- border-bottom: 1px solid var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4)) !important;
2176
- transition: opacity 0.3s ease; }
2177
-
2178
- .react-grid-item:hover > .react-resizable-handle::after {
2179
- opacity: 1; }
2180
-
2181
- .react-grid-placeholder {
2182
- background: rgba(0, 0, 0, 0.13) !important; }
2183
-
2184
- /* This fixes the flickering bug in RGL when resizing elements */
2185
- .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 {
2186
- color: inherit; }
2187
- .react-draggable-transparent-selection input::-moz-placeholder {
2188
- color: inherit; }
2189
- .react-draggable-transparent-selection input:-ms-input-placeholder {
2190
- color: inherit; }
2191
- .react-draggable-transparent-selection span::selection,
2192
- .react-draggable-transparent-selection div::selection,
2193
- .react-draggable-transparent-selection a::selection,
2194
- .react-draggable-transparent-selection input::selection,
2195
- .react-draggable-transparent-selection text::selection,
2196
- .react-draggable-transparent-selection input::placeholder {
2197
- color: inherit; }
2198
-
2199
- .dashboard-tile-response-container .layout-pane-primary {
2200
- overflow: hidden; }
2201
-
2202
- .splitter-layout,
2203
- .layout-pane,
2204
- .dashboard-tile-split-pane-container,
2205
- .react-autoql-dashboard-drilldown-original {
2206
- display: flex;
2207
- align-items: stretch;
2208
- justify-content: center;
2209
- width: 100%; }
2210
-
2211
- .dashboard-tile-response-container .splitter-layout,
2212
- .dashboard-tile-response-container .layout-pane,
2213
- .dashboard-tile-response-container .dashboard-tile-split-pane-container {
2214
- background: inherit; }
2215
-
2216
- .notification-modal-content .react-autoql-step-content p {
2217
- margin-bottom: 0.5em;
2218
- margin-top: 0.5em;
2219
- padding-left: 8px; }
2220
-
2221
- .notification-modal-content .step-btn-container {
2222
- text-align: right;
2223
- display: flex;
2224
- min-height: 50px; }
2225
-
2226
- .expression-valid-checkmark.react-autoql-icon svg {
2227
- color: var(--react-autoql-success-color); }
2228
-
2229
- .expression-invalid-message-container {
2230
- max-width: 75%;
2231
- float: left;
2232
- text-align: left !important;
2233
- display: flex;
2234
- flex-direction: row;
2235
- align-items: left;
2236
- justify-content: left; }
2237
-
2238
- .expression-invalid-message {
2239
- color: var(--react-autoql-danger-color);
2240
- display: 'inline-block'; }
2241
-
2242
- .notification-rule-outer-container {
2243
- position: relative;
2244
- border: 1px solid transparent;
2245
- border-radius: 4px;
2246
- padding-bottom: 5px; }
2247
-
2248
- .expression-error-message {
2249
- padding-left: 5px; }
2131
+ overflow: hidden;
2132
+ background: var(--react-autoql-background-color-secondary); }
2250
2133
 
2251
- .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
- border: none; }
2134
+ .empty-notifications-message {
2135
+ color: var(--react-autoql-text-color-primary);
2136
+ text-align: center;
2137
+ margin-top: 75px; }
2138
+ .empty-notifications-message div {
2139
+ opacity: 0.6; }
2140
+ .empty-notifications-message .empty-notifications-title {
2141
+ font-size: 16px;
2142
+ font-weight: bold;
2143
+ margin-bottom: 5px; }
2144
+ .empty-notifications-message .empty-notifications-img {
2145
+ width: 250px;
2146
+ height: 250px; }
2253
2147
 
2254
- .query-tips-page-container {
2148
+ .react-autoql-notification-list-container {
2255
2149
  height: 100%;
2256
- padding: 10px; }
2257
- .query-tips-page-container .chat-bar-input-icon {
2258
- top: 20px;
2259
- left: 26px; }
2260
- .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2261
- padding-left: 46px; }
2150
+ padding: 20px;
2151
+ overflow-y: auto;
2152
+ background: var(--react-autoql-background-color-secondary); }
2262
2153
 
2263
- .query-tips-result-container {
2264
- color: var(--react-autoql-text-color-primary);
2265
- padding: 0px 20px;
2266
- text-align: center;
2267
- max-width: 550px;
2268
- margin: 0 auto; }
2269
- .query-tips-result-container .query-tip-list-container {
2270
- margin-bottom: 20px; }
2271
- .query-tips-result-container .animated-item {
2272
- -webkit-animation: fadeIn 0.3s linear;
2273
- animation: fadeIn 0.3s linear;
2274
- -webkit-animation-fill-mode: both;
2275
- animation-fill-mode: both; }
2276
- .query-tips-result-container .query-tip-item {
2277
- position: relative;
2278
- padding: 13px;
2279
- border-top: 1px solid rgba(0, 0, 0, 0.04);
2154
+ .react-autoql-notification-dismiss-all {
2155
+ text-align: right;
2156
+ margin-bottom: 12px;
2157
+ padding-right: 10px;
2158
+ color: var(--react-autoql-text-color-primary, rgba(0, 0, 0, 0.4));
2159
+ transition: color 0.1s ease; }
2160
+ .react-autoql-notification-dismiss-all span {
2161
+ opacity: 0.8;
2280
2162
  cursor: pointer; }
2281
- .query-tips-result-container .query-tip-item:first-child {
2282
- border-top: none; }
2283
- .query-tips-result-container .query-tip-item .execute-btn {
2284
- position: absolute;
2285
- right: 10px;
2286
- top: 4px;
2287
- font-size: 20px;
2288
- visibility: hidden;
2289
- opacity: 0; }
2290
- .query-tips-result-container .query-tip-item:hover {
2291
- font-weight: bold;
2292
- color: var(--react-autoql-accent-color); }
2293
- .query-tips-result-container .query-tip-item:hover .execute-btn {
2294
- visibility: visible;
2295
- opacity: 1; }
2296
- .query-tips-result-container .query-tips-result-placeholder {
2297
- margin-top: 50px;
2298
- opacity: 0.6; }
2163
+ .react-autoql-notification-dismiss-all span:hover {
2164
+ opacity: 1; }
2299
2165
 
2300
- .chat-bar-loading-spinner {
2301
- position: absolute;
2302
- right: 20px;
2303
- top: 22px; }
2166
+ .react-autoql-notification-display-name-input {
2167
+ width: 100%; }
2304
2168
 
2305
- #react-paginate {
2306
- position: relative;
2307
- background: transparent;
2308
- padding: 8px; }
2309
- #react-paginate ul {
2310
- display: inline-block;
2311
- padding-left: 0;
2312
- margin-bottom: 0; }
2313
- #react-paginate li {
2314
- display: inline-block;
2315
- color: var(--react-autoql-text-color-primary);
2316
- cursor: pointer;
2317
- margin-right: 3px;
2318
- border-radius: 5px;
2319
- margin-bottom: 0;
2320
- -webkit-user-select: none;
2321
- -moz-user-select: none;
2322
- -ms-user-select: none;
2323
- user-select: none; }
2324
- #react-paginate li:hover {
2325
- opacity: 0.7;
2326
- border-radius: 50%; }
2327
- #react-paginate li a {
2328
- display: inline-block;
2329
- color: var(--react-autoql-text-color-primary);
2330
- outline: none;
2331
- width: 28px;
2332
- height: 28px;
2333
- line-height: 28px; }
2334
- #react-paginate li.selected {
2335
- background: var(--react-autoql-accent-color);
2336
- border-radius: 50%;
2337
- outline: none; }
2338
- #react-paginate li.selected a {
2339
- color: #fff; }
2340
- #react-paginate .pagination-next.disabled,
2341
- #react-paginate .pagination-previous.disabled {
2342
- opacity: 0.5;
2343
- pointer-events: none; }
2344
- #react-paginate .pagination-previous,
2345
- #react-paginate .pagination-next {
2346
- position: absolute;
2347
- font-size: 18px; }
2348
- #react-paginate .pagination-previous a,
2349
- #react-paginate .pagination-next a {
2350
- color: var(--react-autoql-accent-color); }
2351
- #react-paginate .pagination-previous {
2352
- left: 20px; }
2353
- #react-paginate .pagination-next {
2354
- right: 20px; }
2169
+ .react-autoql-notification-message-input {
2170
+ width: 100%; }
2355
2171
 
2356
- .animated-item:nth-child(1) {
2357
- -webkit-animation-delay: 0.08s;
2358
- animation-delay: 0.08s; }
2172
+ .react-autoql-notification-list-item:nth-of-type(0) {
2173
+ -webkit-animation-delay: 0s;
2174
+ animation-delay: 0s; }
2359
2175
 
2360
- .animated-item:nth-child(2) {
2361
- -webkit-animation-delay: 0.16s;
2362
- animation-delay: 0.16s; }
2176
+ .react-autoql-notification-list-item:nth-of-type(1) {
2177
+ -webkit-animation-delay: 0.1s;
2178
+ animation-delay: 0.1s; }
2363
2179
 
2364
- .animated-item:nth-child(3) {
2365
- -webkit-animation-delay: 0.24s;
2366
- animation-delay: 0.24s; }
2180
+ .react-autoql-notification-list-item:nth-of-type(2) {
2181
+ -webkit-animation-delay: 0.2s;
2182
+ animation-delay: 0.2s; }
2367
2183
 
2368
- .animated-item:nth-child(4) {
2369
- -webkit-animation-delay: 0.32s;
2370
- animation-delay: 0.32s; }
2184
+ .react-autoql-notification-list-item:nth-of-type(3) {
2185
+ -webkit-animation-delay: 0.3s;
2186
+ animation-delay: 0.3s; }
2371
2187
 
2372
- .animated-item:nth-child(5) {
2188
+ .react-autoql-notification-list-item:nth-of-type(4) {
2373
2189
  -webkit-animation-delay: 0.4s;
2374
2190
  animation-delay: 0.4s; }
2375
2191
 
2376
- .animated-item:nth-child(6) {
2377
- -webkit-animation-delay: 0.48s;
2378
- animation-delay: 0.48s; }
2379
-
2380
- .animated-item:nth-child(7) {
2381
- -webkit-animation-delay: 0.56s;
2382
- animation-delay: 0.56s; }
2192
+ .react-autoql-notification-list-item:nth-of-type(5) {
2193
+ -webkit-animation-delay: 0.5s;
2194
+ animation-delay: 0.5s; }
2383
2195
 
2384
- .animated-item:nth-child(8) {
2385
- -webkit-animation-delay: 0.64s;
2386
- animation-delay: 0.64s; }
2196
+ .react-autoql-notification-list-item:nth-of-type(6) {
2197
+ -webkit-animation-delay: 0.6s;
2198
+ animation-delay: 0.6s; }
2387
2199
 
2388
- .animated-item:nth-child(9) {
2389
- -webkit-animation-delay: 0.72s;
2390
- animation-delay: 0.72s; }
2200
+ .react-autoql-notification-list-item:nth-of-type(7) {
2201
+ -webkit-animation-delay: 0.7s;
2202
+ animation-delay: 0.7s; }
2391
2203
 
2392
- .animated-item:nth-child(10) {
2204
+ .react-autoql-notification-list-item:nth-of-type(8) {
2393
2205
  -webkit-animation-delay: 0.8s;
2394
2206
  animation-delay: 0.8s; }
2395
2207
 
2396
- .animated-item:nth-child(11) {
2397
- -webkit-animation-delay: 0.88s;
2398
- animation-delay: 0.88s; }
2399
-
2400
- .animated-item:nth-child(12) {
2401
- -webkit-animation-delay: 0.96s;
2402
- animation-delay: 0.96s; }
2403
-
2404
- .animated-item:nth-child(13) {
2405
- -webkit-animation-delay: 1.04s;
2406
- animation-delay: 1.04s; }
2407
-
2408
- .animated-item:nth-child(14) {
2409
- -webkit-animation-delay: 1.12s;
2410
- animation-delay: 1.12s; }
2208
+ .react-autoql-notification-list-item:nth-of-type(9) {
2209
+ -webkit-animation-delay: 0.9s;
2210
+ animation-delay: 0.9s; }
2411
2211
 
2412
- .animated-item:nth-child(15) {
2413
- -webkit-animation-delay: 1.2s;
2414
- animation-delay: 1.2s; }
2212
+ .react-autoql-notification-list-item:nth-of-type(10) {
2213
+ -webkit-animation-delay: 1s;
2214
+ animation-delay: 1s; }
2415
2215
 
2416
- @-webkit-keyframes fadeIn {
2216
+ @-webkit-keyframes slideIn {
2417
2217
  0% {
2418
2218
  opacity: 0;
2419
- top: 100px; }
2420
- 75% {
2421
- opacity: 0.5;
2422
- top: 0px; }
2219
+ top: 500px; }
2423
2220
  100% {
2424
- opacity: 1; } }
2221
+ opacity: 1;
2222
+ top: 0; } }
2223
+
2224
+ .notification-rule-add-btn-outer,
2225
+ .notification-rule-validate-btn-outer {
2226
+ text-align: center;
2227
+ border-style: dashed !important;
2228
+ height: 38px;
2229
+ line-height: 25px;
2230
+ margin: 0 !important;
2231
+ overflow: hidden; }
2232
+
2233
+ .notification-rule-outer-container {
2234
+ position: relative;
2235
+ border: 1px solid transparent;
2236
+ border-radius: 4px; }
2237
+ .notification-rule-outer-container.outlined {
2238
+ border-color: rgba(0, 0, 0, 0.15);
2239
+ padding: 0 20px;
2240
+ padding-bottom: 12px; }
2241
+
2242
+ .notification-outer-all-any {
2243
+ position: absolute;
2244
+ left: 0;
2245
+ top: 50%; }
2246
+
2247
+ .notification-first-group-btn-container {
2248
+ display: flex;
2249
+ justify-content: space-between; }
2250
+
2251
+ .data-alerts-container.read-only .react-autoql-notification-group-container {
2252
+ border: none; }
2425
2253
 
2426
2254
  .chat-single-message-container {
2427
2255
  transition: background-color 0.2s ease;
@@ -2689,6 +2517,60 @@ so we dont have to redraw the whole table */
2689
2517
  background-color: var(--react-autoql-danger-color, #ca0b00);
2690
2518
  color: #fff; }
2691
2519
 
2520
+ .react-autoql-cascader {
2521
+ position: relative;
2522
+ white-space: nowrap;
2523
+ overflow: hidden;
2524
+ min-width: 300px; }
2525
+ .react-autoql-cascader .options-container {
2526
+ transition: max-width 0.3s ease;
2527
+ display: inline-block;
2528
+ vertical-align: top;
2529
+ padding: 0 10px;
2530
+ margin: 10px 0;
2531
+ width: 100%;
2532
+ max-width: calc(100% - 20px);
2533
+ white-space: pre-wrap; }
2534
+ .react-autoql-cascader .options-container.hidden {
2535
+ max-width: 0; }
2536
+ .react-autoql-cascader .options-container.hidden span {
2537
+ white-space: nowrap; }
2538
+ .react-autoql-cascader .options-container.hidden .option {
2539
+ opacity: 0;
2540
+ pointer-events: none; }
2541
+ .react-autoql-cascader .options-container .options-title {
2542
+ padding: 4px;
2543
+ padding-left: 10px;
2544
+ font-weight: 600; }
2545
+ .react-autoql-cascader .options-container .cascader-back-arrow {
2546
+ position: absolute;
2547
+ cursor: pointer;
2548
+ top: 15px;
2549
+ left: 0; }
2550
+ .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2551
+ opacity: 0.8; }
2552
+ .react-autoql-cascader .options-container .option {
2553
+ cursor: pointer;
2554
+ padding: 4px;
2555
+ display: flex;
2556
+ justify-content: space-between;
2557
+ border-radius: 2px;
2558
+ padding-left: 10px; }
2559
+ .react-autoql-cascader .options-container .option .option-arrow {
2560
+ opacity: 0.7; }
2561
+ .react-autoql-cascader .options-container .option .option-execute-icon {
2562
+ opacity: 0;
2563
+ color: #fff;
2564
+ font-size: 16px;
2565
+ vertical-align: middle; }
2566
+ .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2567
+ background-color: var(--react-autoql-accent-color, #26a7df);
2568
+ color: #fff; }
2569
+ .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2570
+ opacity: 1; }
2571
+ .react-autoql-cascader .options-container:not(:last-child) {
2572
+ border-right: 1px solid #d3d3d352; }
2573
+
2692
2574
  .react-autoql-condition-locking-input {
2693
2575
  padding: 5px;
2694
2576
  padding-left: 20px;
@@ -2732,170 +2614,368 @@ so we dont have to redraw the whole table */
2732
2614
  .react-autoql-accept-conditions-button span:hover {
2733
2615
  opacity: 1; }
2734
2616
 
2735
- .condition-table tr {
2736
- cursor: pointer; }
2737
- .condition-table tr:hover {
2738
- background: var(--react-autoql-accent-color);
2739
- color: white; }
2617
+ .condition-table tr {
2618
+ cursor: pointer; }
2619
+ .condition-table tr:hover {
2620
+ background: var(--react-autoql-accent-color);
2621
+ color: white; }
2622
+
2623
+ .condition-table td {
2624
+ text-align: left;
2625
+ padding: 4px;
2626
+ margin: 0 10px 0 10px;
2627
+ padding-left: 10px; }
2628
+
2629
+ .condition-list {
2630
+ padding: 0;
2631
+ margin: 0 auto; }
2632
+
2633
+ .condition-list-item {
2634
+ cursor: pointer;
2635
+ padding: 4px;
2636
+ margin: 0 10px 0 10px;
2637
+ display: flex;
2638
+ justify-content: space-between;
2639
+ border-radius: 2px;
2640
+ padding-left: 10px; }
2641
+ .condition-list-item:hover {
2642
+ background: var(--react-autoql-accent-color);
2643
+ color: white; }
2644
+
2645
+ .empty-condition-list {
2646
+ text-align: center;
2647
+ padding: 4px;
2648
+ margin: 0 20px 0 20px; }
2649
+
2650
+ .autoql-close-button {
2651
+ background-color: inherit;
2652
+ border: none;
2653
+ text-align: left;
2654
+ font-size: 20px;
2655
+ margin-top: -20px;
2656
+ float: none !important;
2657
+ color: inherit; }
2658
+
2659
+ .react-tiny-popover-container {
2660
+ background: var(--react-autoql-background-color-primary); }
2661
+
2662
+ .autoql-condition-locking-menu-container .react-autosuggest__container {
2663
+ flex-grow: 1;
2664
+ display: inline;
2665
+ width: 90%;
2666
+ height: 100%; }
2667
+
2668
+ .autoql-condition-locking-menu-container
2669
+ .react-autosuggest__suggestions-container--open {
2670
+ position: absolute;
2671
+ overflow-y: scroll !important;
2672
+ padding-top: 5px;
2673
+ padding-bottom: 5px;
2674
+ display: block;
2675
+ font-family: inherit;
2676
+ font-size: 15px;
2677
+ font-weight: normal;
2678
+ z-index: 2;
2679
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2680
+ text-align: left;
2681
+ width: 95%;
2682
+ top: 35px;
2683
+ border-radius: 4px;
2684
+ margin: 10px auto;
2685
+ height: auto;
2686
+ max-height: 50vh;
2687
+ overflow-y: auto; }
2688
+
2689
+ .autoql-condition-locking-menu-container
2690
+ .react-autosuggest__suggestions-container--open {
2691
+ background-color: var(--react-autoql-background-color-primary);
2692
+ border: 1px solid var(--react-autoql-border-color);
2693
+ color: var(--react-autoql-text-color-primary); }
2694
+
2695
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2696
+ color: var(--react-autoql-text-color-primary); }
2697
+
2698
+ .autoql-condition-locking-menu-container input::-moz-placeholder {
2699
+ opacity: 0.5; }
2700
+
2701
+ .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2702
+ opacity: 0.5; }
2703
+
2704
+ .autoql-condition-locking-menu-container input::placeholder {
2705
+ opacity: 0.5; }
2706
+
2707
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2708
+ margin: 0;
2709
+ padding: 0;
2710
+ list-style-type: none; }
2711
+
2712
+ .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2713
+ cursor: pointer;
2714
+ padding: 2px;
2715
+ padding-left: 18px;
2716
+ letter-spacing: 0.05em;
2717
+ line-height: 22.5px; }
2718
+
2719
+ .autoql-condition-locking-menu-container
2720
+ .react-autosuggest__suggestion--highlighted {
2721
+ background-color: rgba(0, 0, 0, 0.1) !important; }
2722
+
2723
+ .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2724
+ padding: 10px 0 0 10px;
2725
+ font-size: 12px;
2726
+ color: #777; }
2727
+
2728
+ .query-tips-page-container {
2729
+ height: 100%;
2730
+ padding: 10px; }
2731
+ .query-tips-page-container .chat-bar-input-icon {
2732
+ top: 20px;
2733
+ left: 26px; }
2734
+ .query-tips-page-container .react-autoql-chatbar-input.left-padding {
2735
+ padding-left: 46px; }
2736
+
2737
+ .query-tips-result-container {
2738
+ color: var(--react-autoql-text-color-primary);
2739
+ padding: 0px 20px;
2740
+ text-align: center;
2741
+ max-width: 550px;
2742
+ margin: 0 auto; }
2743
+ .query-tips-result-container .query-tip-list-container {
2744
+ margin-bottom: 20px; }
2745
+ .query-tips-result-container .animated-item {
2746
+ -webkit-animation: fadeIn 0.3s linear;
2747
+ animation: fadeIn 0.3s linear;
2748
+ -webkit-animation-fill-mode: both;
2749
+ animation-fill-mode: both; }
2750
+ .query-tips-result-container .query-tip-item {
2751
+ position: relative;
2752
+ padding: 13px;
2753
+ border-top: 1px solid rgba(0, 0, 0, 0.04);
2754
+ cursor: pointer; }
2755
+ .query-tips-result-container .query-tip-item:first-child {
2756
+ border-top: none; }
2757
+ .query-tips-result-container .query-tip-item .execute-btn {
2758
+ position: absolute;
2759
+ right: 10px;
2760
+ top: 4px;
2761
+ font-size: 20px;
2762
+ visibility: hidden;
2763
+ opacity: 0; }
2764
+ .query-tips-result-container .query-tip-item:hover {
2765
+ font-weight: bold;
2766
+ color: var(--react-autoql-accent-color); }
2767
+ .query-tips-result-container .query-tip-item:hover .execute-btn {
2768
+ visibility: visible;
2769
+ opacity: 1; }
2770
+ .query-tips-result-container .query-tips-result-placeholder {
2771
+ margin-top: 50px;
2772
+ opacity: 0.6; }
2773
+
2774
+ .chat-bar-loading-spinner {
2775
+ position: absolute;
2776
+ right: 20px;
2777
+ top: 22px; }
2778
+
2779
+ #react-paginate {
2780
+ position: relative;
2781
+ background: transparent;
2782
+ padding: 8px; }
2783
+ #react-paginate ul {
2784
+ display: inline-block;
2785
+ padding-left: 0;
2786
+ margin-bottom: 0; }
2787
+ #react-paginate li {
2788
+ display: inline-block;
2789
+ color: var(--react-autoql-text-color-primary);
2790
+ cursor: pointer;
2791
+ margin-right: 3px;
2792
+ border-radius: 5px;
2793
+ margin-bottom: 0;
2794
+ -webkit-user-select: none;
2795
+ -moz-user-select: none;
2796
+ -ms-user-select: none;
2797
+ user-select: none; }
2798
+ #react-paginate li:hover {
2799
+ opacity: 0.7;
2800
+ border-radius: 50%; }
2801
+ #react-paginate li a {
2802
+ display: inline-block;
2803
+ color: var(--react-autoql-text-color-primary);
2804
+ outline: none;
2805
+ width: 28px;
2806
+ height: 28px;
2807
+ line-height: 28px; }
2808
+ #react-paginate li.selected {
2809
+ background: var(--react-autoql-accent-color);
2810
+ border-radius: 50%;
2811
+ outline: none; }
2812
+ #react-paginate li.selected a {
2813
+ color: #fff; }
2814
+ #react-paginate .pagination-next.disabled,
2815
+ #react-paginate .pagination-previous.disabled {
2816
+ opacity: 0.5;
2817
+ pointer-events: none; }
2818
+ #react-paginate .pagination-previous,
2819
+ #react-paginate .pagination-next {
2820
+ position: absolute;
2821
+ font-size: 18px; }
2822
+ #react-paginate .pagination-previous a,
2823
+ #react-paginate .pagination-next a {
2824
+ color: var(--react-autoql-accent-color); }
2825
+ #react-paginate .pagination-previous {
2826
+ left: 20px; }
2827
+ #react-paginate .pagination-next {
2828
+ right: 20px; }
2829
+
2830
+ .animated-item:nth-child(1) {
2831
+ -webkit-animation-delay: 0.08s;
2832
+ animation-delay: 0.08s; }
2833
+
2834
+ .animated-item:nth-child(2) {
2835
+ -webkit-animation-delay: 0.16s;
2836
+ animation-delay: 0.16s; }
2837
+
2838
+ .animated-item:nth-child(3) {
2839
+ -webkit-animation-delay: 0.24s;
2840
+ animation-delay: 0.24s; }
2841
+
2842
+ .animated-item:nth-child(4) {
2843
+ -webkit-animation-delay: 0.32s;
2844
+ animation-delay: 0.32s; }
2845
+
2846
+ .animated-item:nth-child(5) {
2847
+ -webkit-animation-delay: 0.4s;
2848
+ animation-delay: 0.4s; }
2849
+
2850
+ .animated-item:nth-child(6) {
2851
+ -webkit-animation-delay: 0.48s;
2852
+ animation-delay: 0.48s; }
2740
2853
 
2741
- .condition-table td {
2742
- text-align: left;
2743
- padding: 4px;
2744
- margin: 0 10px 0 10px;
2745
- padding-left: 10px; }
2854
+ .animated-item:nth-child(7) {
2855
+ -webkit-animation-delay: 0.56s;
2856
+ animation-delay: 0.56s; }
2746
2857
 
2747
- .condition-list {
2748
- padding: 0;
2749
- margin: 0 auto; }
2858
+ .animated-item:nth-child(8) {
2859
+ -webkit-animation-delay: 0.64s;
2860
+ animation-delay: 0.64s; }
2750
2861
 
2751
- .condition-list-item {
2752
- cursor: pointer;
2753
- padding: 4px;
2754
- margin: 0 10px 0 10px;
2755
- display: flex;
2756
- justify-content: space-between;
2757
- border-radius: 2px;
2758
- padding-left: 10px; }
2759
- .condition-list-item:hover {
2760
- background: var(--react-autoql-accent-color);
2761
- color: white; }
2862
+ .animated-item:nth-child(9) {
2863
+ -webkit-animation-delay: 0.72s;
2864
+ animation-delay: 0.72s; }
2762
2865
 
2763
- .empty-condition-list {
2764
- text-align: center;
2765
- padding: 4px;
2766
- margin: 0 20px 0 20px; }
2866
+ .animated-item:nth-child(10) {
2867
+ -webkit-animation-delay: 0.8s;
2868
+ animation-delay: 0.8s; }
2767
2869
 
2768
- .autoql-close-button {
2769
- background-color: inherit;
2770
- border: none;
2771
- text-align: left;
2772
- font-size: 20px;
2773
- margin-top: -20px;
2774
- float: none !important;
2775
- color: inherit; }
2870
+ .animated-item:nth-child(11) {
2871
+ -webkit-animation-delay: 0.88s;
2872
+ animation-delay: 0.88s; }
2776
2873
 
2777
- .react-tiny-popover-container {
2778
- background: var(--react-autoql-background-color-primary); }
2874
+ .animated-item:nth-child(12) {
2875
+ -webkit-animation-delay: 0.96s;
2876
+ animation-delay: 0.96s; }
2779
2877
 
2780
- .autoql-condition-locking-menu-container .react-autosuggest__container {
2781
- flex-grow: 1;
2782
- display: inline;
2783
- width: 90%;
2784
- height: 100%; }
2878
+ .animated-item:nth-child(13) {
2879
+ -webkit-animation-delay: 1.04s;
2880
+ animation-delay: 1.04s; }
2785
2881
 
2786
- .autoql-condition-locking-menu-container
2787
- .react-autosuggest__suggestions-container--open {
2788
- position: absolute;
2789
- overflow-y: scroll !important;
2790
- padding-top: 5px;
2791
- padding-bottom: 5px;
2792
- display: block;
2793
- font-family: inherit;
2794
- font-size: 15px;
2795
- font-weight: normal;
2796
- z-index: 2;
2797
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.13);
2798
- text-align: left;
2799
- width: 95%;
2800
- top: 35px;
2801
- border-radius: 4px;
2802
- margin: 10px auto;
2803
- height: auto;
2804
- max-height: 50vh;
2805
- overflow-y: auto; }
2882
+ .animated-item:nth-child(14) {
2883
+ -webkit-animation-delay: 1.12s;
2884
+ animation-delay: 1.12s; }
2806
2885
 
2807
- .autoql-condition-locking-menu-container
2808
- .react-autosuggest__suggestions-container--open {
2809
- background-color: var(--react-autoql-background-color-primary);
2810
- border: 1px solid var(--react-autoql-border-color);
2811
- color: var(--react-autoql-text-color-primary); }
2886
+ .animated-item:nth-child(15) {
2887
+ -webkit-animation-delay: 1.2s;
2888
+ animation-delay: 1.2s; }
2812
2889
 
2813
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2814
- color: var(--react-autoql-text-color-primary); }
2890
+ @-webkit-keyframes fadeIn {
2891
+ 0% {
2892
+ opacity: 0;
2893
+ top: 100px; }
2894
+ 75% {
2895
+ opacity: 0.5;
2896
+ top: 0px; }
2897
+ 100% {
2898
+ opacity: 1; } }
2815
2899
 
2816
- .autoql-condition-locking-menu-container input::-moz-placeholder {
2817
- opacity: 0.5; }
2900
+ .ReactModal__Overlay {
2901
+ background-color: transparent !important;
2902
+ transition: background-color 0.2s ease-in-out;
2903
+ z-index: 9999; }
2818
2904
 
2819
- .autoql-condition-locking-menu-container input:-ms-input-placeholder {
2820
- opacity: 0.5; }
2905
+ .ReactModal__Overlay--after-open {
2906
+ background-color: rgba(0, 0, 0, 0.25) !important; }
2821
2907
 
2822
- .autoql-condition-locking-menu-container input::placeholder {
2823
- opacity: 0.5; }
2908
+ .ReactModal__Overlay--before-close {
2909
+ background-color: transparent !important; }
2824
2910
 
2825
- .autoql-condition-locking-menu-container .react-autosuggest__suggestions-list {
2826
- margin: 0;
2827
- padding: 0;
2828
- list-style-type: none; }
2911
+ .ReactModal__Content {
2912
+ display: flex;
2913
+ flex-direction: column;
2914
+ transform: scale(0);
2915
+ transition: all 0.2s ease-in-out;
2916
+ color: var(--react-autoql-text-color-primary);
2917
+ border: 1px solid var(--react-autoql-border-color) !important;
2918
+ background: var(--react-autoql-background-color-primary) !important;
2919
+ box-shadow: 0 0 14px 1px rgba(0, 0, 0, 0.15);
2920
+ padding: 0 !important;
2921
+ margin: auto auto;
2922
+ max-width: 90vw;
2923
+ max-height: calc(100vh - 90px); }
2924
+ .ReactModal__Content input.react-autoql-input,
2925
+ .ReactModal__Content textarea.react-autoql-input,
2926
+ .ReactModal__Content textarea {
2927
+ border-color: var(--react-autoql-border-color);
2928
+ color: var(--react-autoql-text-color-primary);
2929
+ background: var(--react-autoql-background-color-primary, white); }
2930
+ .ReactModal__Content input.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea.react-autoql-input::-moz-placeholder, .ReactModal__Content textarea::-moz-placeholder {
2931
+ color: var(--react-autoql-text-color-placeholder); }
2932
+ .ReactModal__Content input.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea.react-autoql-input:-ms-input-placeholder, .ReactModal__Content textarea:-ms-input-placeholder {
2933
+ color: var(--react-autoql-text-color-placeholder); }
2934
+ .ReactModal__Content input.react-autoql-input::placeholder,
2935
+ .ReactModal__Content textarea.react-autoql-input::placeholder,
2936
+ .ReactModal__Content textarea::placeholder {
2937
+ color: var(--react-autoql-text-color-placeholder); }
2829
2938
 
2830
- .autoql-condition-locking-menu-container .react-autosuggest__suggestion {
2831
- cursor: pointer;
2832
- padding: 2px;
2833
- padding-left: 18px;
2834
- letter-spacing: 0.05em;
2835
- line-height: 22.5px; }
2939
+ .ReactModal__Overlay--after-open .ReactModal__Content {
2940
+ transform: scale(1); }
2836
2941
 
2837
- .autoql-condition-locking-menu-container
2838
- .react-autosuggest__suggestion--highlighted {
2839
- background-color: rgba(0, 0, 0, 0.1) !important; }
2942
+ .ReactModal__Overlay--before-close .ReactModal__Content {
2943
+ transform: scale(0); }
2840
2944
 
2841
- .autoql-condition-locking-menu-container .react-autosuggest__section-title {
2842
- padding: 10px 0 0 10px;
2843
- font-size: 12px;
2844
- color: #777; }
2945
+ .react-autoql-modal-header {
2946
+ position: relative;
2947
+ text-align: center;
2948
+ flex: 0 0 52px;
2949
+ border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
2950
+ padding: 14px 60px;
2951
+ font-size: 16px; }
2845
2952
 
2846
- .react-autoql-cascader {
2953
+ .react-autoql-modal-footer {
2847
2954
  position: relative;
2848
- white-space: nowrap;
2849
- overflow: hidden;
2850
- min-width: 300px; }
2851
- .react-autoql-cascader .options-container {
2852
- transition: max-width 0.3s ease;
2853
- display: inline-block;
2854
- vertical-align: top;
2855
- padding: 0 10px;
2856
- margin: 10px 0;
2857
- width: 100%;
2858
- max-width: calc(100% - 20px);
2859
- white-space: pre-wrap; }
2860
- .react-autoql-cascader .options-container.hidden {
2861
- max-width: 0; }
2862
- .react-autoql-cascader .options-container.hidden span {
2863
- white-space: nowrap; }
2864
- .react-autoql-cascader .options-container.hidden .option {
2865
- opacity: 0;
2866
- pointer-events: none; }
2867
- .react-autoql-cascader .options-container .options-title {
2868
- padding: 4px;
2869
- padding-left: 10px;
2870
- font-weight: 600; }
2871
- .react-autoql-cascader .options-container .cascader-back-arrow {
2872
- position: absolute;
2873
- cursor: pointer;
2874
- top: 15px;
2875
- left: 0; }
2876
- .react-autoql-cascader .options-container .cascader-back-arrow:hover {
2877
- opacity: 0.8; }
2878
- .react-autoql-cascader .options-container .option {
2879
- cursor: pointer;
2880
- padding: 4px;
2881
- display: flex;
2882
- justify-content: space-between;
2883
- border-radius: 2px;
2884
- padding-left: 10px; }
2885
- .react-autoql-cascader .options-container .option .option-arrow {
2886
- opacity: 0.7; }
2887
- .react-autoql-cascader .options-container .option .option-execute-icon {
2888
- opacity: 0;
2889
- color: #fff;
2890
- font-size: 16px;
2891
- vertical-align: middle; }
2892
- .react-autoql-cascader .options-container .option:hover, .react-autoql-cascader .options-container .option.active {
2893
- background-color: var(--react-autoql-accent-color, #26a7df);
2894
- color: #fff; }
2895
- .react-autoql-cascader .options-container .option:hover .option-execute-icon, .react-autoql-cascader .options-container .option.active .option-execute-icon {
2896
- opacity: 1; }
2897
- .react-autoql-cascader .options-container:not(:last-child) {
2898
- border-right: 1px solid #d3d3d352; }
2955
+ flex: 0 0 52px;
2956
+ border-top: 1px solid rgba(0, 0, 0, 0.05);
2957
+ text-align: right;
2958
+ padding: 8px 10px; }
2959
+
2960
+ .react-autoql-modal-body {
2961
+ display: flex;
2962
+ flex-direction: column;
2963
+ padding: 25px;
2964
+ flex: 1;
2965
+ overflow: hidden; }
2966
+ .react-autoql-modal-body h3 {
2967
+ color: var(--react-autoql-text-color-primary); }
2968
+
2969
+ .react-autoql-modal-close-btn {
2970
+ position: absolute !important;
2971
+ top: 10px;
2972
+ right: 18px;
2973
+ font-size: 22px;
2974
+ opacity: 0.6 !important;
2975
+ cursor: pointer; }
2976
+
2977
+ .react-autoql-modal-close-btn:hover {
2978
+ opacity: 1 !important; }
2899
2979
 
2900
2980
  .react-autoql-table-container {
2901
2981
  height: 100%;
@@ -3101,86 +3181,6 @@ the whole table when the filter button is clicked */
3101
3181
  .copy-sql-modal-content:hover .copy-sql-btn {
3102
3182
  opacity: 1; }
3103
3183
 
3104
- .ReactModal__Overlay {
3105
- background-color: transparent !important;
3106
- transition: background-color 0.2s ease-in-out;
3107
- z-index: 9999; }
3108
-
3109
- .ReactModal__Overlay--after-open {
3110
- background-color: rgba(0, 0, 0, 0.25) !important; }
3111
-
3112
- .ReactModal__Overlay--before-close {
3113
- background-color: transparent !important; }
3114
-
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); }
3142
-
3143
- .ReactModal__Overlay--after-open .ReactModal__Content {
3144
- transform: scale(1); }
3145
-
3146
- .ReactModal__Overlay--before-close .ReactModal__Content {
3147
- transform: scale(0); }
3148
-
3149
- .react-autoql-modal-header {
3150
- position: relative;
3151
- text-align: center;
3152
- flex: 0 0 52px;
3153
- border-bottom: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.05));
3154
- padding: 14px 60px;
3155
- font-size: 16px; }
3156
-
3157
- .react-autoql-modal-footer {
3158
- position: relative;
3159
- flex: 0 0 52px;
3160
- border-top: 1px solid rgba(0, 0, 0, 0.05);
3161
- text-align: right;
3162
- padding: 8px 10px; }
3163
-
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); }
3172
-
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; }
3180
-
3181
- .react-autoql-modal-close-btn:hover {
3182
- opacity: 1 !important; }
3183
-
3184
3184
  .react-autoql-chart-container {
3185
3185
  position: relative;
3186
3186
  height: 100%;
@@ -3311,77 +3311,75 @@ the whole table when the filter button is clicked */
3311
3311
  .react-autoql-toolbar-btn:hover {
3312
3312
  opacity: 0.7; }
3313
3313
 
3314
+ .react-autoql-steps-container {
3315
+ margin: 10px; }
3314
3316
 
3315
- .react-autoql-radio-btn-container {
3316
- display: inline-block;
3317
- border-radius: 4px; }
3318
- .react-autoql-radio-btn-container [type='radio']:checked,
3319
- .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3320
- position: absolute;
3321
- left: -9999px; }
3322
- .react-autoql-radio-btn-container [type='radio']:checked + label,
3323
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3324
- position: relative;
3325
- padding-left: 28px;
3326
- cursor: pointer;
3327
- line-height: 20px;
3328
- display: inline-block; }
3329
- .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3330
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3331
- content: '';
3332
- position: absolute;
3333
- left: 1px;
3334
- top: 1px;
3335
- width: 18px;
3336
- height: 18px;
3337
- border: 1px solid #ddd;
3338
- border-radius: 100%;
3339
- background: #fff; }
3340
- .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3341
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3342
- content: '';
3343
- width: 12px;
3344
- height: 12px;
3345
- background: var(--react-autoql-accent-color, #26a7df);
3346
- position: absolute;
3347
- top: 4px;
3348
- left: 4px;
3349
- border-radius: 100%;
3350
- transition: all 0.2s ease; }
3351
- .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3352
- opacity: 0;
3353
- transform: scale(0); }
3354
- .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3355
- opacity: 1;
3356
- transform: scale(1); }
3357
- .react-autoql-radio-btn-container .react-autoql-radio-btn {
3358
- position: relative;
3359
- display: inline-block;
3360
- padding: 3px 12px;
3361
- border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3362
- margin-left: -1px;
3363
- transition: all 0.2s ease;
3364
- cursor: pointer; }
3365
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3366
- background-color: var(--react-autoql-accent-color, #26a7df);
3367
- border-color: var(--react-autoql-accent-color, #26a7df);
3368
- color: #fff;
3369
- z-index: 3; }
3370
- .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3371
- background-color: inherit;
3372
- color: var(--react-autoql-accent-color, #26a7df);
3373
- z-index: 3; }
3374
- .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3317
+ .react-autoql-step-container {
3318
+ position: relative;
3319
+ border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3320
+ margin-left: 12px;
3321
+ padding-left: 20px;
3322
+ padding-bottom: 5px;
3323
+ transition: all 0.5s ease; }
3324
+ .react-autoql-step-container.complete {
3325
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3326
+ .react-autoql-step-container.complete .react-autoql-step-dot {
3375
3327
  border-color: var(--react-autoql-accent-color, #26a7df);
3376
- color: var(--react-autoql-accent-color, #26a7df);
3377
- z-index: 2; }
3378
- .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3379
- border-top-left-radius: 4px;
3380
- border-bottom-left-radius: 4px;
3381
- margin-left: 0; }
3382
- .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3383
- border-top-right-radius: 4px;
3384
- border-bottom-right-radius: 4px; }
3328
+ background: var(--react-autoql-accent-color, #26a7df);
3329
+ color: #fff; }
3330
+ .react-autoql-step-container.error {
3331
+ border-color: var(--react-autoql-warning-color); }
3332
+ .react-autoql-step-container.error .react-autoql-step-dot {
3333
+ border-color: var(--react-autoql-warning-color);
3334
+ background: var(--react-autoql-warning-color);
3335
+ color: white; }
3336
+ .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3337
+ pointer-events: none;
3338
+ height: 10px;
3339
+ opacity: 0;
3340
+ margin: 0; }
3341
+
3342
+ .react-autoql-step-dot {
3343
+ position: absolute;
3344
+ top: 0;
3345
+ left: -10px;
3346
+ height: 20px;
3347
+ width: 20px;
3348
+ border-radius: 15px;
3349
+ background: var(--react-autoql-background-color-primary, #fff);
3350
+ border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3351
+ transition: all 0.5s ease;
3352
+ font-size: 10.5px;
3353
+ color: var(--react-autoql-text-color-placeholder, lightgray);
3354
+ text-align: center; }
3355
+
3356
+ .react-autoql-step-title-container:hover {
3357
+ cursor: pointer;
3358
+ transition: color 0.2s ease;
3359
+ color: var(--react-autoql-accent-color, #26a7df); }
3360
+
3361
+ .react-autoql-step-title {
3362
+ font-weight: 500;
3363
+ font-size: 15px;
3364
+ line-height: 15px;
3365
+ padding-top: 2px; }
3366
+
3367
+ .react-autoql-step-subtitle {
3368
+ font-size: 13px;
3369
+ padding-top: 6px;
3370
+ padding-bottom: 6px;
3371
+ color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3372
+
3373
+ .react-autoql-step-content {
3374
+ margin: 15px;
3375
+ margin-top: 0; }
3376
+
3377
+ .react-autoql-step-content-container {
3378
+ transition-timing-function: ease;
3379
+ transition-property: height, opacity, margin;
3380
+ transition-duration: 0.5s;
3381
+ opacity: 1; }
3382
+
3385
3383
 
3386
3384
  .content {
3387
3385
  margin: 2rem; }
@@ -3515,6 +3513,77 @@ the whole table when the filter button is clicked */
3515
3513
  .react-autoql-checkbox__input::before:not(.react-autoql-checkbox--switch__input) {
3516
3514
  background: var(--react-autoql-accent-color); }
3517
3515
 
3516
+ .react-autoql-radio-btn-container {
3517
+ display: inline-block;
3518
+ border-radius: 4px; }
3519
+ .react-autoql-radio-btn-container [type='radio']:checked,
3520
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) {
3521
+ position: absolute;
3522
+ left: -9999px; }
3523
+ .react-autoql-radio-btn-container [type='radio']:checked + label,
3524
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label {
3525
+ position: relative;
3526
+ padding-left: 28px;
3527
+ cursor: pointer;
3528
+ line-height: 20px;
3529
+ display: inline-block; }
3530
+ .react-autoql-radio-btn-container [type='radio']:checked + label:before,
3531
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:before {
3532
+ content: '';
3533
+ position: absolute;
3534
+ left: 1px;
3535
+ top: 1px;
3536
+ width: 18px;
3537
+ height: 18px;
3538
+ border: 1px solid #ddd;
3539
+ border-radius: 100%;
3540
+ background: #fff; }
3541
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after,
3542
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3543
+ content: '';
3544
+ width: 12px;
3545
+ height: 12px;
3546
+ background: var(--react-autoql-accent-color, #26a7df);
3547
+ position: absolute;
3548
+ top: 4px;
3549
+ left: 4px;
3550
+ border-radius: 100%;
3551
+ transition: all 0.2s ease; }
3552
+ .react-autoql-radio-btn-container [type='radio']:not(:checked) + label:after {
3553
+ opacity: 0;
3554
+ transform: scale(0); }
3555
+ .react-autoql-radio-btn-container [type='radio']:checked + label:after {
3556
+ opacity: 1;
3557
+ transform: scale(1); }
3558
+ .react-autoql-radio-btn-container .react-autoql-radio-btn {
3559
+ position: relative;
3560
+ display: inline-block;
3561
+ padding: 3px 12px;
3562
+ border: 1px solid var(--react-autoql-border-color, #dcdcdc);
3563
+ margin-left: -1px;
3564
+ transition: all 0.2s ease;
3565
+ cursor: pointer; }
3566
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active {
3567
+ background-color: var(--react-autoql-accent-color, #26a7df);
3568
+ border-color: var(--react-autoql-accent-color, #26a7df);
3569
+ color: #fff;
3570
+ z-index: 3; }
3571
+ .react-autoql-radio-btn-container .react-autoql-radio-btn.active.outlined {
3572
+ background-color: inherit;
3573
+ color: var(--react-autoql-accent-color, #26a7df);
3574
+ z-index: 3; }
3575
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:hover:not(.active) {
3576
+ border-color: var(--react-autoql-accent-color, #26a7df);
3577
+ color: var(--react-autoql-accent-color, #26a7df);
3578
+ z-index: 2; }
3579
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:first-child {
3580
+ border-top-left-radius: 4px;
3581
+ border-bottom-left-radius: 4px;
3582
+ margin-left: 0; }
3583
+ .react-autoql-radio-btn-container .react-autoql-radio-btn:last-child {
3584
+ border-top-right-radius: 4px;
3585
+ border-bottom-right-radius: 4px; }
3586
+
3518
3587
  .react-autoql-input-container {
3519
3588
  position: relative;
3520
3589
  margin: 2px 5px;
@@ -3566,74 +3635,90 @@ the whole table when the filter button is clicked */
3566
3635
  opacity: 1;
3567
3636
  color: var(--react-autoql-accent-color, #26a7df); }
3568
3637
 
3569
- .react-autoql-steps-container {
3570
- margin: 10px; }
3638
+ .spinner-loader {
3639
+ display: inline-block;
3640
+ width: 14px;
3641
+ height: 14px;
3642
+ margin-right: 6px; }
3571
3643
 
3572
- .react-autoql-step-container {
3573
- position: relative;
3574
- border-left: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3575
- margin-left: 12px;
3576
- padding-left: 20px;
3577
- padding-bottom: 5px;
3578
- transition: all 0.5s ease; }
3579
- .react-autoql-step-container.complete {
3580
- border-color: var(--react-autoql-accent-color, #26a7df); }
3581
- .react-autoql-step-container.complete .react-autoql-step-dot {
3582
- border-color: var(--react-autoql-accent-color, #26a7df);
3583
- background: var(--react-autoql-accent-color, #26a7df);
3584
- color: #fff; }
3585
- .react-autoql-step-container.error {
3586
- border-color: var(--react-autoql-warning-color); }
3587
- .react-autoql-step-container.error .react-autoql-step-dot {
3588
- border-color: var(--react-autoql-warning-color);
3589
- background: var(--react-autoql-warning-color);
3590
- color: white; }
3591
- .react-autoql-step-container:not(.active) .react-autoql-step-content-container {
3592
- pointer-events: none;
3593
- height: 10px;
3594
- opacity: 0;
3595
- margin: 0; }
3644
+ .spinner-loader:after {
3645
+ content: " ";
3646
+ display: block;
3647
+ width: 16px;
3648
+ height: 16px;
3649
+ margin: 0px;
3650
+ border-radius: 50%;
3651
+ border: 1px solid currentColor;
3652
+ border-color: currentColor transparent currentColor transparent;
3653
+ -webkit-animation: spinner-loader 1.2s linear infinite;
3654
+ animation: spinner-loader 1.2s linear infinite; }
3596
3655
 
3597
- .react-autoql-step-dot {
3598
- position: absolute;
3599
- top: 0;
3600
- left: -10px;
3601
- height: 20px;
3602
- width: 20px;
3603
- border-radius: 15px;
3604
- background: var(--react-autoql-background-color-primary, #fff);
3605
- border: 1px solid var(--react-autoql-text-color-placeholder, lightgray);
3606
- transition: all 0.5s ease;
3607
- font-size: 10.5px;
3608
- color: var(--react-autoql-text-color-placeholder, lightgray);
3609
- text-align: center; }
3656
+ @-webkit-keyframes spinner-loader {
3657
+ 0% {
3658
+ transform: rotate(0deg); }
3659
+ 100% {
3660
+ transform: rotate(360deg); } }
3610
3661
 
3611
- .react-autoql-step-title-container:hover {
3612
- cursor: pointer;
3613
- transition: color 0.2s ease;
3614
- color: var(--react-autoql-accent-color, #26a7df); }
3662
+ @keyframes spinner-loader {
3663
+ 0% {
3664
+ transform: rotate(0deg); }
3665
+ 100% {
3666
+ transform: rotate(360deg); } }
3615
3667
 
3616
- .react-autoql-step-title {
3617
- font-weight: 500;
3618
- font-size: 15px;
3619
- line-height: 15px;
3620
- padding-top: 2px; }
3668
+ .react-autoql-notification-rule-container {
3669
+ display: flex; }
3670
+ .react-autoql-notification-rule-container .react-autoql-rule-input {
3671
+ display: flex;
3672
+ flex-direction: column;
3673
+ flex: 1;
3674
+ width: 100%; }
3675
+ .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3676
+ display: flex;
3677
+ flex: 1; }
3678
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3679
+ display: flex;
3680
+ padding: 2px 0;
3681
+ border-radius: 4px;
3682
+ transition: all 0.3s ease;
3683
+ flex: 1; }
3684
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3685
+ flex: 0;
3686
+ flex-basis: 33px; }
3687
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3688
+ flex: 1;
3689
+ margin-left: 4px; }
3690
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3691
+ cursor: pointer;
3692
+ opacity: 0.6;
3693
+ padding: 6px; }
3694
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3695
+ opacity: 1; }
3696
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3697
+ display: none; }
3698
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3699
+ margin: 0; }
3700
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3701
+ .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3702
+ + .react-autoql-rule-term-type-selector {
3703
+ color: var(--react-autoql-accent-color, #26a7df);
3704
+ border-color: var(--react-autoql-accent-color, #26a7df); }
3621
3705
 
3622
- .react-autoql-step-subtitle {
3623
- font-size: 13px;
3624
- padding-top: 6px;
3625
- padding-bottom: 6px;
3626
- color: var(--react-autoql-text-color-placeholder, rgba(0, 0, 0, 0.4)); }
3706
+ .read-only-rule-term {
3707
+ display: inline-block;
3708
+ border: 1px solid rgba(0, 0, 0, 0.06);
3709
+ background: rgba(0, 0, 0, 0.02);
3710
+ padding: 3px 7px;
3711
+ line-height: 1.5em;
3712
+ margin-right: 5px;
3713
+ margin-bottom: 2px;
3714
+ margin-top: 2px;
3715
+ border-radius: 4px; }
3716
+
3717
+ .expression-term-validation-error {
3718
+ padding: 0 10px;
3719
+ color: var(--react-autoql-warning-color); }
3627
3720
 
3628
- .react-autoql-step-content {
3629
- margin: 15px;
3630
- margin-top: 0; }
3631
3721
 
3632
- .react-autoql-step-content-container {
3633
- transition-timing-function: ease;
3634
- transition-property: height, opacity, margin;
3635
- transition-duration: 0.5s;
3636
- opacity: 1; }
3637
3722
 
3638
3723
  .notification-read-only-group {
3639
3724
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
@@ -3753,89 +3838,6 @@ the whole table when the filter button is clicked */
3753
3838
  opacity: 1;
3754
3839
  color: var(--react-autoql-accent-color); }
3755
3840
 
3756
- .react-autoql-notification-rule-container {
3757
- display: flex; }
3758
- .react-autoql-notification-rule-container .react-autoql-rule-input {
3759
- display: flex;
3760
- flex-direction: column;
3761
- flex: 1;
3762
- width: 100%; }
3763
- .react-autoql-notification-rule-container .react-autoql-rule-first-input-container {
3764
- display: flex;
3765
- flex: 1; }
3766
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container {
3767
- display: flex;
3768
- padding: 2px 0;
3769
- border-radius: 4px;
3770
- transition: all 0.3s ease;
3771
- flex: 1; }
3772
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-condition-select {
3773
- flex: 0;
3774
- flex-basis: 33px; }
3775
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-rule-input {
3776
- flex: 1;
3777
- margin-left: 4px; }
3778
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn {
3779
- cursor: pointer;
3780
- opacity: 0.6;
3781
- padding: 6px; }
3782
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-delete-compare-btn:hover {
3783
- opacity: 1; }
3784
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container.hidden {
3785
- display: none; }
3786
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container {
3787
- margin: 0; }
3788
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container:hover + .react-autoql-rule-term-type-selector,
3789
- .react-autoql-notification-rule-container .react-autoql-rule-second-input-container .react-autoql-input-container.focus
3790
- + .react-autoql-rule-term-type-selector {
3791
- color: var(--react-autoql-accent-color, #26a7df);
3792
- border-color: var(--react-autoql-accent-color, #26a7df); }
3793
-
3794
- .read-only-rule-term {
3795
- display: inline-block;
3796
- border: 1px solid rgba(0, 0, 0, 0.06);
3797
- background: rgba(0, 0, 0, 0.02);
3798
- padding: 3px 7px;
3799
- line-height: 1.5em;
3800
- margin-right: 5px;
3801
- margin-bottom: 2px;
3802
- margin-top: 2px;
3803
- border-radius: 4px; }
3804
-
3805
- .expression-term-validation-error {
3806
- padding: 0 10px;
3807
- color: var(--react-autoql-warning-color); }
3808
-
3809
- .spinner-loader {
3810
- display: inline-block;
3811
- width: 14px;
3812
- height: 14px;
3813
- margin-right: 6px; }
3814
-
3815
- .spinner-loader:after {
3816
- content: " ";
3817
- display: block;
3818
- width: 16px;
3819
- height: 16px;
3820
- margin: 0px;
3821
- border-radius: 50%;
3822
- border: 1px solid currentColor;
3823
- border-color: currentColor transparent currentColor transparent;
3824
- -webkit-animation: spinner-loader 1.2s linear infinite;
3825
- animation: spinner-loader 1.2s linear infinite; }
3826
-
3827
- @-webkit-keyframes spinner-loader {
3828
- 0% {
3829
- transform: rotate(0deg); }
3830
- 100% {
3831
- transform: rotate(360deg); } }
3832
-
3833
- @keyframes spinner-loader {
3834
- 0% {
3835
- transform: rotate(0deg); }
3836
- 100% {
3837
- transform: rotate(360deg); } }
3838
-
3839
3841
  .react-autoql-select {
3840
3842
  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
3841
3843
  border-radius: 4px;
@@ -3874,8 +3876,6 @@ the whole table when the filter button is clicked */
3874
3876
  .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
3875
3877
  background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
3876
3878
 
3877
-
3878
-
3879
3879
  .slack-modal-error-container,
3880
3880
  .slack-modal-empty-list-message {
3881
3881
  display: flex;