@syncfusion/ej2-vue-querybuilder 23.2.7 → 24.1.43

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.
Files changed (38) hide show
  1. package/CHANGELOG.md +118 -3
  2. package/dist/ej2-vue-querybuilder.umd.min.js +1 -1
  3. package/dist/global/ej2-vue-querybuilder.min.js +2 -2
  4. package/package.json +9 -9
  5. package/styles/bootstrap-dark.css +1 -767
  6. package/styles/bootstrap.css +1 -752
  7. package/styles/bootstrap4.css +1 -876
  8. package/styles/bootstrap5-dark.css +1 -805
  9. package/styles/bootstrap5.css +1 -805
  10. package/styles/fabric-dark.css +1 -726
  11. package/styles/fabric.css +1 -708
  12. package/styles/fluent-dark.css +1 -788
  13. package/styles/fluent.css +1 -788
  14. package/styles/highcontrast-light.css +1 -792
  15. package/styles/highcontrast.css +1 -820
  16. package/styles/material-dark.css +1 -721
  17. package/styles/material.css +1 -746
  18. package/styles/material3-dark.css +1 -820
  19. package/styles/material3.css +1 -876
  20. package/styles/query-builder/bootstrap-dark.css +1 -767
  21. package/styles/query-builder/bootstrap.css +1 -752
  22. package/styles/query-builder/bootstrap4.css +1 -876
  23. package/styles/query-builder/bootstrap5-dark.css +1 -805
  24. package/styles/query-builder/bootstrap5.css +1 -805
  25. package/styles/query-builder/fabric-dark.css +1 -726
  26. package/styles/query-builder/fabric.css +1 -708
  27. package/styles/query-builder/fluent-dark.css +1 -788
  28. package/styles/query-builder/fluent.css +1 -788
  29. package/styles/query-builder/highcontrast-light.css +1 -792
  30. package/styles/query-builder/highcontrast.css +1 -820
  31. package/styles/query-builder/material-dark.css +1 -721
  32. package/styles/query-builder/material.css +1 -746
  33. package/styles/query-builder/material3-dark.css +1 -820
  34. package/styles/query-builder/material3.css +1 -876
  35. package/styles/query-builder/tailwind-dark.css +1 -743
  36. package/styles/query-builder/tailwind.css +1 -743
  37. package/styles/tailwind-dark.css +1 -743
  38. package/styles/tailwind.css +1 -743
@@ -1,820 +1 @@
1
- :root {
2
- --color-sf-black: 0, 0, 0;
3
- --color-sf-white: 255, 255, 255;
4
- --color-sf-primary: 208, 188, 255;
5
- --color-sf-primary-container: 79, 55, 139;
6
- --color-sf-secondary: 204, 194, 220;
7
- --color-sf-secondary-container: 74, 68, 88;
8
- --color-sf-tertiary: 239, 184, 200;
9
- --color-sf-tertiary-container: 99, 59, 72;
10
- --color-sf-surface: 28, 27, 31;
11
- --color-sf-surface-variant: 73, 69, 79;
12
- --color-sf-background: var(--color-sf-surface);
13
- --color-sf-on-primary: 55, 30, 115;
14
- --color-sf-on-primary-container: 234, 221, 255;
15
- --color-sf-on-secondary: 51, 45, 65;
16
- --color-sf-on-secondary-container: 232, 222, 248;
17
- --color-sf-on-tertiary: 73, 37, 50;
18
- --color-sf-on-tertiary-containe: 255, 216, 228;
19
- --color-sf-on-surface: 230, 225, 229;
20
- --color-sf-on-surface-variant: 202, 196, 208;
21
- --color-sf-on-background: 230, 225, 229;
22
- --color-sf-outline: 147, 143, 153;
23
- --color-sf-outline-variant: 68, 71, 70;
24
- --color-sf-shadow: 0, 0, 0;
25
- --color-sf-surface-tint-color: 208, 188, 255;
26
- --color-sf-inverse-surface: 230, 225, 229;
27
- --color-sf-inverse-on-surface: 49, 48, 51;
28
- --color-sf-inverse-primary: 103, 80, 164;
29
- --color-sf-scrim: 0, 0, 0;
30
- --color-sf-error: 242, 184, 181;
31
- --color-sf-error-container: 140, 29, 24;
32
- --color-sf-on-error: 96, 20, 16;
33
- --color-sf-on-error-container: 249, 222, 220;
34
- --color-sf-success: 83, 202, 23;
35
- --color-sf-success-container: 22, 62, 2;
36
- --color-sf-on-success: 13, 39, 0;
37
- --color-sf-on-success-container: 183, 250, 150;
38
- --color-sf-info: 71, 172, 251;
39
- --color-sf-info-container: 0, 67, 120;
40
- --color-sf-on-info: 0, 51, 91;
41
- --color-sf-on-info-container: 173, 219, 255;
42
- --color-sf-warning: 245, 180, 130;
43
- --color-sf-warning-container: 123, 65, 0;
44
- --color-sf-on-warning: 99, 52, 0;
45
- --color-sf-on-warning-container: 255, 220, 193;
46
- --color-sf-spreadsheet-gridline: 231, 224, 236;
47
- --color-sf-shadow-focus-ring1: 0 0 0 1px #000000, 0 0 0 3px #ffffff;
48
- --color-sf-success-text: 0, 0, 0;
49
- --color-sf-warning-text: 0, 0, 0;
50
- --color-sf-info-text: 0, 0, 0;
51
- --color-sf-danger-text: 0, 0, 0;
52
- --color-sf-diagram-palette-background: var(--color-sf-inverse-surface);
53
- --color-sf-content-text-color-alt2: var(--color-sf-on-secondary);
54
- }
55
-
56
- .e-ddl.e-control-wrapper .e-ddl-icon::before {
57
- transform: rotate(0deg);
58
- transition: transform 300ms ease;
59
- }
60
-
61
- .e-ddl.e-control-wrapper.e-icon-anim .e-ddl-icon::before {
62
- transform: rotate(180deg);
63
- transition: transform 300ms ease;
64
- }
65
-
66
- .e-dropdownbase .e-list-item.e-active.e-hover {
67
- color: rgba(var(--color-sf-on-surface));
68
- }
69
-
70
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:active,
71
- .e-input-group:not(.e-disabled) .e-control.e-dropdownlist ~ .e-ddl-icon:hover,
72
- .e-input-group:not(.e-disabled) .e-back-icon:active,
73
- .e-input-group:not(.e-disabled) .e-back-icon:hover,
74
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:active,
75
- .e-popup.e-ddl .e-input-group:not(.e-disabled) .e-clear-icon:hover {
76
- background: rgba(var(--color-sf-on-surface), 0.08);
77
- }
78
-
79
- .e-input-group .e-ddl-icon:not(:active)::after {
80
- animation: none;
81
- }
82
-
83
- .e-ddl.e-popup {
84
- border: 0;
85
- box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
86
- margin-top: 2px;
87
- }
88
-
89
- .e-popup.e-ddl .e-dropdownbase {
90
- min-height: 26px;
91
- border-radius: 4px;
92
- }
93
-
94
- .e-bigger .e-popup.e-ddl-device-filter .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
95
- border-color: rgba(var(--color-sf-primary));
96
- }
97
-
98
- .e-bigger .e-popup.e-ddl-device-filter {
99
- margin-top: 0;
100
- }
101
-
102
- .e-bigger .e-ddl-device .e-input-group,
103
- .e-bigger .e-ddl-device .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
104
- background: rgba(0, 0, 0, 0.0001);
105
- border-width: 0;
106
- box-shadow: none;
107
- margin-bottom: 0;
108
- }
109
-
110
- .e-bigger .e-ddl-device .e-input-group .e-back-icon,
111
- .e-bigger .e-ddl-device .e-input-group input.e-input,
112
- .e-bigger .e-ddl-device .e-input-group .e-clear-icon {
113
- background: rgba(0, 0, 0, 0.0001);
114
- }
115
-
116
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
117
- margin: 0 6px;
118
- min-height: 30px;
119
- min-width: 30px;
120
- }
121
-
122
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
123
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
124
- min-height: 38px;
125
- min-width: 38px;
126
- }
127
-
128
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
129
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon {
130
- min-height: 22px;
131
- min-width: 22px;
132
- }
133
-
134
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter,
135
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-filter {
136
- padding: 4px 16px 4px 0;
137
- }
138
-
139
- .e-input-group.e-ddl,
140
- .e-input-group.e-ddl .e-input,
141
- .e-input-group.e-ddl .e-ddl-icon {
142
- background: transparent;
143
- }
144
-
145
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group:hover:not(.e-disabled):not(.e-float-icon-left),
146
- .e-ddl.e-ddl-device.e-ddl-device-filter .e-input-group.e-control-wrapper:hover:not(.e-disabled):not(.e-float-icon-left) {
147
- border-bottom-width: 0;
148
- }
149
-
150
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
151
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
152
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
153
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus.e-small .e-clear-icon,
154
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon,
155
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
156
- margin: 4px;
157
- }
158
-
159
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
160
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
161
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
162
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
163
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-input-focus .e-input-filter,
164
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small.e-input-focus .e-input-filter {
165
- padding: 4px 5px 4px 12px;
166
- }
167
-
168
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
169
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group .e-clear-icon,
170
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
171
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-small .e-clear-icon,
172
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
173
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger .e-clear-icon,
174
- .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-bigger.e-small .e-clear-icon {
175
- min-height: 34px;
176
- min-width: 34px;
177
- }
178
-
179
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
180
- .e-bigger.e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group .e-input-filter,
181
- .e-bigger .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
182
- .e-bigger.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-small .e-input-filter,
183
- .e-small .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
184
- .e-small.e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger .e-input-filter,
185
- .e-popup.e-ddl:not(.e-ddl-device) .e-filter-parent .e-input-group.e-bigger.e-small .e-input-filter {
186
- padding: 8px 16px;
187
- }
188
-
189
- .e-bigger.e-small .e-popup.e-ddl:not(.e-ddl-device) .e-input-group.e-input-focus .e-clear-icon {
190
- margin: 0 4px;
191
- }
192
-
193
- .e-ddl.e-popup.e-outline .e-filter-parent {
194
- padding: 4px 8px;
195
- }
196
-
197
- /* stylelint-disable-line no-empty-source */
198
- /* stylelint-disable property-no-vendor-prefix */
199
- @keyframes material-spinner-rotate {
200
- 0% {
201
- transform: rotate(0deg);
202
- }
203
- 100% {
204
- transform: rotate(360deg);
205
- }
206
- }
207
- @keyframes fabric-spinner-rotate {
208
- 0% {
209
- transform: rotate(0deg);
210
- }
211
- 100% {
212
- transform: rotate(360deg);
213
- }
214
- }
215
- .e-query-builder .e-collapse-rule::before {
216
- content: "\e80e";
217
- }
218
-
219
- .e-query-builder {
220
- border: 1px solid;
221
- border-radius: 4px;
222
- height: auto;
223
- width: auto;
224
- }
225
- .e-query-builder .e-multiselect .e-qb-spinner .e-spinner-inner {
226
- left: auto;
227
- right: 5px;
228
- }
229
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-not {
230
- border: 1px solid var(--color-sf-outline);
231
- }
232
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
233
- border-bottom-left-radius: 20px;
234
- border-top-left-radius: 20px;
235
- }
236
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
237
- border-bottom-right-radius: 20px;
238
- border-top-right-radius: 20px;
239
- }
240
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or {
241
- border-bottom-left-radius: 20px;
242
- border-top-left-radius: 20px;
243
- }
244
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small {
245
- border: 1px solid var(--color-sf-outline);
246
- border-bottom-right-radius: 4px;
247
- border-bottom-left-radius: 0;
248
- border-top-left-radius: 0;
249
- border-top-right-radius: 4px;
250
- }
251
- .e-query-builder.e-rtl .e-btn-group.e-rtl .e-qb-toggle.e-btn.e-small.e-not-readonly {
252
- border-bottom-right-radius: 20px;
253
- }
254
- .e-query-builder.e-rtl .e-multiselect .e-qb-spinner .e-spinner-inner {
255
- left: 5px;
256
- right: auto;
257
- }
258
- .e-query-builder.e-rtl.e-bigger.e-device .e-group-body .e-rule-container .e-rule-delete, .e-query-builder.e-rtl.e-bigger .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
259
- padding-left: 14px;
260
- }
261
- .e-query-builder.e-rtl.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder.e-rtl .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
262
- text-align: left;
263
- }
264
- .e-query-builder.e-rtl.e-device .e-group-body .e-rule-container .e-rule-delete, .e-query-builder.e-rtl .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
265
- padding-left: 10px;
266
- }
267
- .e-query-builder.e-rtl .e-group-header .e-group-action .e-btn {
268
- margin-left: 0;
269
- margin-right: 12px;
270
- }
271
- .e-query-builder.e-rtl .e-horizontal-mode .e-rule-delete {
272
- margin-left: 0;
273
- margin-right: 8px;
274
- }
275
- .e-query-builder.e-rtl .e-group-body {
276
- padding-left: 0;
277
- padding-right: 20px;
278
- }
279
- .e-query-builder.e-rtl .e-rule-list > ::before {
280
- border-width: 0 2px 2px 0;
281
- }
282
- .e-query-builder.e-rtl .e-rule-list > .e-group-container:first-child {
283
- margin-top: 0;
284
- }
285
- .e-query-builder.e-rtl .e-rule-list > ::after, .e-query-builder.e-rtl .e-rule-list > ::before {
286
- right: -13px;
287
- }
288
- .e-query-builder.e-rtl .e-rule-list > ::after {
289
- border-width: 0 2px 0 0;
290
- }
291
- .e-query-builder.e-rtl .e-rule-list .e-group-container::before {
292
- right: -12px;
293
- }
294
- .e-query-builder.e-rtl .e-rule-list > .e-group-container {
295
- padding-right: 0;
296
- }
297
- .e-query-builder .e-group-container, .e-query-builder .e-rule-container {
298
- position: relative;
299
- }
300
- .e-query-builder .e-rule-list > :first-child::before {
301
- top: -11px;
302
- }
303
- .e-query-builder .e-rule-list > :last-child::after {
304
- display: none;
305
- }
306
- .e-query-builder .e-rule-list > ::before {
307
- border-width: 0 0 2px 2px;
308
- height: 25px;
309
- top: -9px;
310
- }
311
- .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
312
- border-style: dashed;
313
- content: "";
314
- left: -13px;
315
- position: absolute;
316
- width: 14px;
317
- }
318
- .e-query-builder .e-rule-list > ::after {
319
- border-width: 0 0 0 2px;
320
- height: calc(100% - 17px);
321
- top: 17px;
322
- }
323
- .e-query-builder .e-rule-list > .e-rule-container::before {
324
- height: calc(50% + 8px);
325
- }
326
- .e-query-builder .e-rule-list > .e-rule-container:not(:first-child)::before {
327
- height: calc(50% + 10px);
328
- }
329
- .e-query-builder .e-rule-list > .e-rule-container::after {
330
- height: calc(50% + 6px);
331
- top: calc(50% - 3px);
332
- }
333
- .e-query-builder .e-rule-list > .e-group-container:first-child {
334
- margin-top: 0;
335
- }
336
- .e-query-builder .e-rule-list .e-group-container::before {
337
- left: -12px;
338
- }
339
- .e-query-builder .e-rule-list .e-group-container::after {
340
- left: -12px;
341
- }
342
- .e-query-builder .e-group-header .e-group-action .e-btn {
343
- margin-left: 12px;
344
- }
345
- .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small {
346
- border: 1px solid var(--color-sf-outline);
347
- border-bottom-right-radius: 20px;
348
- border-bottom-left-radius: 4px;
349
- border-top-left-radius: 4px;
350
- border-top-right-radius: 20px;
351
- }
352
- .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-not-readonly {
353
- border: 1px solid var(--color-sf-outline);
354
- border-bottom-left-radius: 20px;
355
- border-top-left-radius: 20px;
356
- pointer-events: none;
357
- }
358
- .e-query-builder .e-group-header .e-qb-toggle.e-btn.e-small.e-readonly {
359
- display: none;
360
- }
361
- .e-query-builder .e-group-header .e-btn-group {
362
- border: none;
363
- box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
364
- display: inline-block;
365
- }
366
- .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small {
367
- border: 1px solid var(--color-sf-outline);
368
- }
369
- .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-not {
370
- border: 1px solid var(--color-sf-outline);
371
- border-bottom-right-radius: 0;
372
- border-top-right-radius: 0;
373
- border-bottom-left-radius: 0;
374
- border-top-left-radius: 0;
375
- }
376
- .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-readonly-and {
377
- border-bottom-right-radius: 20px;
378
- border-top-right-radius: 20px;
379
- }
380
- .e-query-builder .e-group-header .e-btn.e-btngroup-and-lbl.e-small.e-readonly {
381
- display: none;
382
- }
383
- .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small {
384
- border: 1px solid var(--color-sf-outline);
385
- }
386
- .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or-not {
387
- border-bottom-left-radius: 20px;
388
- border-top-left-radius: 20px;
389
- }
390
- .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly-or {
391
- border: 1px solid var(--color-sf-outline);
392
- border-bottom-left-radius: 20px;
393
- border-top-left-radius: 20px;
394
- }
395
- .e-query-builder .e-group-header .e-btn.e-btngroup-or-lbl.e-small.e-readonly {
396
- display: none;
397
- }
398
- .e-query-builder .e-group-header .e-group-action {
399
- display: inline-block;
400
- margin-top: 5px;
401
- }
402
- .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn,
403
- .e-query-builder .e-group-header .e-deletegroup {
404
- margin-bottom: 2px;
405
- box-shadow: none;
406
- }
407
- .e-query-builder .e-group-header .e-dropdown-btn.e-add-btn.e-readonly,
408
- .e-query-builder .e-group-header .e-deletegroup.e-readonly {
409
- display: none;
410
- }
411
- .e-query-builder .e-group-header button.e-button-hide {
412
- display: none;
413
- }
414
- .e-query-builder .e-group-header.e-btn.e-small.e-round {
415
- box-shadow: none;
416
- }
417
- .e-query-builder .e-group-header .e-group-action .e-readonly {
418
- display: inline-block;
419
- visibility: hidden;
420
- }
421
- .e-query-builder .e-rule-list .e-group-container {
422
- margin-left: 0;
423
- margin-top: 12px;
424
- width: 100%;
425
- }
426
- .e-query-builder .e-rule-list {
427
- padding: 14px 0 14px 0;
428
- padding-bottom: 0;
429
- }
430
- .e-query-builder .e-group-container {
431
- padding: 12px;
432
- }
433
- .e-query-builder .e-rule-container {
434
- border: 1px solid;
435
- border-radius: 4px;
436
- }
437
- .e-query-builder .e-rule-list > .e-group-container {
438
- padding: 0;
439
- padding-bottom: 12px;
440
- }
441
- .e-query-builder .e-group-container .e-rule-list > .e-group-container {
442
- padding-bottom: 0;
443
- }
444
- .e-query-builder .e-group-body {
445
- padding-left: 20px;
446
- }
447
- .e-query-builder .e-group-body .e-rule-container {
448
- box-shadow: none;
449
- height: auto;
450
- margin-top: -3px;
451
- padding-right: 12px;
452
- }
453
- .e-query-builder .e-group-body .e-rule-container.e-prev-joined-rule {
454
- border-bottom: 0;
455
- border-bottom-left-radius: 0;
456
- border-bottom-right-radius: 0;
457
- }
458
- .e-query-builder .e-group-body .e-rule-container.e-joined-rule {
459
- border-top-left-radius: 0;
460
- border-top-right-radius: 0;
461
- border-top-style: solid;
462
- border-top-width: 1px;
463
- margin-top: 0;
464
- }
465
- .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
466
- margin-top: 12px;
467
- }
468
- .e-query-builder .e-group-body .e-rule-container .e-rule-filter {
469
- padding: 8px 8px 8px 8px;
470
- width: auto;
471
- }
472
- .e-query-builder .e-group-body .e-rule-container .e-rule-sub-filter {
473
- padding: 8px 8px 8px 8px;
474
- width: auto;
475
- }
476
- .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-control-wrapper.e-numeric:not(:first-child), .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-control-wrapper.e-date-wrapper:not(:first-child), .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-control-wrapper.e-input-group:not(:first-child) {
477
- float: right;
478
- margin-top: 12px;
479
- }
480
- .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-multi-select-wrapper {
481
- min-width: 190px;
482
- }
483
- .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-multiselect, .e-query-builder .e-group-body .e-rule-container .e-rule-value .e-multi-select-wrapper {
484
- max-width: 200px;
485
- }
486
- .e-query-builder .e-group-body .e-rule-container .e-rule-value.e-custom-value {
487
- width: 200px;
488
- }
489
- .e-query-builder .e-group-body .e-rule-container .e-operator, .e-query-builder .e-group-body .e-rule-container .e-value {
490
- padding: 8px 8px 8px 8px;
491
- }
492
- .e-query-builder .e-group-body .e-rule-container .e-operator .e-radio-wrapper, .e-query-builder .e-group-body .e-rule-container .e-value .e-radio-wrapper {
493
- margin-right: 15px;
494
- }
495
- .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
496
- display: inline-block;
497
- margin-left: 8px;
498
- }
499
- .e-query-builder .e-group-body .e-rule-container button.e-button-hide {
500
- display: none;
501
- }
502
- .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
503
- display: inline-block;
504
- }
505
- .e-query-builder .e-group-body .e-rule-value.e-hide {
506
- display: none;
507
- }
508
- .e-query-builder .e-group-body .e-rule-value.e-show {
509
- display: inline-block;
510
- }
511
- .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
512
- margin-bottom: 12px;
513
- right: 0;
514
- }
515
- .e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
516
- box-shadow: none;
517
- }
518
- .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete {
519
- box-shadow: none;
520
- right: 0;
521
- }
522
- .e-query-builder .e-group-body .e-vertical-mode .e-removerule.e-rule-delete.e-readonly {
523
- display: none;
524
- }
525
- .e-query-builder .e-dropdown-btn {
526
- box-shadow: none;
527
- }
528
- .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-filter {
529
- padding: 14px;
530
- }
531
- .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-sub-filter {
532
- padding: 14px;
533
- }
534
- .e-query-builder.e-device .e-removerule.e-rule-delete {
535
- box-shadow: none;
536
- }
537
- .e-query-builder.e-device .e-removerule.e-rule-delete.e-readonly {
538
- display: none;
539
- }
540
- .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value .e-multiselect, .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value .e-multi-select-wrapper, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value .e-multi-select-wrapper, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value .e-multiselect {
541
- max-width: 100%;
542
- }
543
- .e-query-builder.e-device .e-group-body .e-rule-container .e-rule-value-delete, .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-value-delete {
544
- text-align: right;
545
- }
546
- .e-query-builder .e-delete-icon::before {
547
- content: "\e7e7";
548
- }
549
- .e-query-builder .e-edit-rule.e-btn.e-small {
550
- box-shadow: none;
551
- }
552
- .e-query-builder .e-edit-rule {
553
- right: 0;
554
- }
555
- .e-query-builder .e-collapse-rule {
556
- border: 0 solid;
557
- border-right: 0;
558
- border-top: 0;
559
- box-shadow: none;
560
- font-size: 20px;
561
- padding: 5px;
562
- position: absolute;
563
- right: 0;
564
- top: 0;
565
- }
566
- .e-query-builder .e-summary-text {
567
- border-style: none;
568
- font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
569
- font-size: 14px;
570
- line-height: 1.5em;
571
- padding: 12px;
572
- resize: none;
573
- width: 100%;
574
- }
575
- .e-query-builder .e-summary-btndiv {
576
- padding: 12px;
577
- text-align: right;
578
- }
579
- .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode, .e-query-builder.e-device .e-rule-list .e-rule-container {
580
- padding-right: 15px;
581
- }
582
- .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode .e-rule-filter, .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode .e-rule-sub-filter, .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode .e-operator, .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode .e-value, .e-query-builder .e-rule-list .e-rule-container.e-vertical-mode .e-rule-value-delete, .e-query-builder.e-device .e-rule-list .e-rule-container .e-rule-filter, .e-query-builder.e-device .e-rule-list .e-rule-container .e-rule-sub-filter, .e-query-builder.e-device .e-rule-list .e-rule-container .e-operator, .e-query-builder.e-device .e-rule-list .e-rule-container .e-value, .e-query-builder.e-device .e-rule-list .e-rule-container .e-rule-value-delete {
583
- padding: 15px 0 0 15px;
584
- }
585
-
586
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-top,
587
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-top {
588
- border-bottom: 8px solid;
589
- }
590
-
591
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-bottom,
592
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-bottom {
593
- border-top: 8px solid;
594
- }
595
-
596
- .e-dropdown-popup .e-addgroup {
597
- float: right;
598
- }
599
- .e-dropdown-popup ul .e-item.e-button-hide {
600
- display: none;
601
- }
602
-
603
- .e-addrule.e-add-icon::before,
604
- .e-addgroup.e-add-icon::before,
605
- .e-query-builder .e-add-icon::before {
606
- content: "\e805";
607
- }
608
-
609
- .e-query-builder.e-device .e-group-container,
610
- .e-bigger.e-query-builder .e-group-container,
611
- .e-bigger .e-query-builder .e-group-container {
612
- padding: 14px;
613
- }
614
- .e-query-builder.e-device .e-rule-list > .e-group-container,
615
- .e-bigger.e-query-builder .e-rule-list > .e-group-container,
616
- .e-bigger .e-query-builder .e-rule-list > .e-group-container {
617
- padding: 0;
618
- }
619
- .e-query-builder.e-device .e-rule-list > .e-rule-container:not(:first-child)::before,
620
- .e-bigger.e-query-builder .e-rule-list > .e-rule-container:not(:first-child)::before,
621
- .e-bigger .e-query-builder .e-rule-list > .e-rule-container:not(:first-child)::before {
622
- height: calc(50% + 12px);
623
- }
624
- .e-query-builder.e-device .e-rule-list > .e-group-container:first-child,
625
- .e-bigger.e-query-builder .e-rule-list > .e-group-container:first-child,
626
- .e-bigger .e-query-builder .e-rule-list > .e-group-container:first-child {
627
- margin-top: 0;
628
- }
629
- .e-query-builder.e-device .e-rule-list > ::before,
630
- .e-bigger.e-query-builder .e-rule-list > ::before,
631
- .e-bigger .e-query-builder .e-rule-list > ::before {
632
- top: -12px;
633
- }
634
- .e-query-builder.e-device .e-group-action .e-btn,
635
- .e-bigger.e-query-builder .e-group-action .e-btn,
636
- .e-bigger .e-query-builder .e-group-action .e-btn {
637
- margin-left: 16px;
638
- }
639
- .e-query-builder.e-device .e-rule-list > :first-child::before,
640
- .e-bigger.e-query-builder .e-rule-list > :first-child::before,
641
- .e-bigger .e-query-builder .e-rule-list > :first-child::before {
642
- top: -14px;
643
- }
644
- .e-query-builder.e-device .e-rule-list,
645
- .e-bigger.e-query-builder .e-rule-list,
646
- .e-bigger .e-query-builder .e-rule-list {
647
- padding: 16px 0 16px 0;
648
- padding-bottom: 0;
649
- }
650
- .e-query-builder.e-device .e-rule-list .e-group-container,
651
- .e-bigger.e-query-builder .e-rule-list .e-group-container,
652
- .e-bigger .e-query-builder .e-rule-list .e-group-container {
653
- margin-top: 14px;
654
- }
655
- .e-query-builder.e-device .e-group-body,
656
- .e-bigger.e-query-builder .e-group-body,
657
- .e-bigger .e-query-builder .e-group-body {
658
- padding-left: 24px;
659
- }
660
- .e-query-builder.e-device .e-group-body .e-rule-container,
661
- .e-bigger.e-query-builder .e-group-body .e-rule-container,
662
- .e-bigger .e-query-builder .e-group-body .e-rule-container {
663
- margin-top: -3px;
664
- padding-right: 15px;
665
- }
666
- .e-query-builder.e-device .e-group-body .e-rule-container.e-vertical-mode,
667
- .e-bigger.e-query-builder .e-group-body .e-rule-container.e-vertical-mode,
668
- .e-bigger .e-query-builder .e-group-body .e-rule-container.e-vertical-mode {
669
- width: auto;
670
- }
671
- .e-query-builder.e-device .e-group-body .e-rule-container.e-separate-rule,
672
- .e-bigger.e-query-builder .e-group-body .e-rule-container.e-separate-rule,
673
- .e-bigger .e-query-builder .e-group-body .e-rule-container.e-separate-rule {
674
- margin-top: 16px;
675
- }
676
- .e-query-builder.e-device .e-group-body .e-rule-delete, .e-query-builder.e-device .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete,
677
- .e-bigger.e-query-builder .e-group-body .e-rule-delete,
678
- .e-bigger.e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete,
679
- .e-bigger .e-query-builder .e-group-body .e-rule-delete,
680
- .e-bigger .e-query-builder .e-group-body .e-rule-container.e-vertical-mode .e-rule-delete {
681
- margin-bottom: 14px;
682
- right: 0;
683
- }
684
- .e-query-builder.e-device .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete,
685
- .e-bigger.e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete,
686
- .e-bigger .e-query-builder .e-group-body .e-rule-container.e-horizontal-mode .e-rule-delete {
687
- margin-bottom: 0;
688
- }
689
- .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-delete,
690
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete,
691
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-delete {
692
- display: inline-block;
693
- margin-left: 16px;
694
- }
695
- .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-filter, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-sub-filter, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-operator, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-value, .e-query-builder.e-device .e-group-body .e-horizontal-mode .e-rule-value-delete,
696
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter,
697
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter,
698
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator,
699
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-value,
700
- .e-bigger.e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete,
701
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-filter,
702
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-sub-filter,
703
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-operator,
704
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value,
705
- .e-bigger .e-query-builder .e-group-body .e-horizontal-mode .e-rule-value-delete {
706
- display: inline-block;
707
- }
708
- .e-query-builder.e-device .e-group-body .e-rule-value.e-custom-value,
709
- .e-bigger.e-query-builder .e-group-body .e-rule-value.e-custom-value,
710
- .e-bigger .e-query-builder .e-group-body .e-rule-value.e-custom-value {
711
- width: 200px;
712
- }
713
- .e-query-builder.e-device .e-group-body .e-rule-value.e-hide,
714
- .e-bigger.e-query-builder .e-group-body .e-rule-value.e-hide,
715
- .e-bigger .e-query-builder .e-group-body .e-rule-value.e-hide {
716
- display: none;
717
- }
718
- .e-query-builder.e-device .e-group-body .e-rule-value.e-show,
719
- .e-bigger.e-query-builder .e-group-body .e-rule-value.e-show,
720
- .e-bigger .e-query-builder .e-group-body .e-rule-value.e-show {
721
- display: inline-block;
722
- }
723
- .e-query-builder.e-device .e-group-body .e-rule-field.e-btn.e-small.e-round, .e-query-builder.e-device .e-group-body .e-rule-delete.e-btn.e-small.e-round,
724
- .e-bigger.e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round,
725
- .e-bigger.e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round,
726
- .e-bigger .e-query-builder .e-group-body .e-rule-field.e-btn.e-small.e-round,
727
- .e-bigger .e-query-builder .e-group-body .e-rule-delete.e-btn.e-small.e-round {
728
- box-shadow: none;
729
- }
730
- .e-query-builder.e-device .e-summary-text,
731
- .e-bigger.e-query-builder .e-summary-text,
732
- .e-bigger .e-query-builder .e-summary-text {
733
- font-size: 16px;
734
- line-height: 1.5em;
735
- padding: 15px;
736
- }
737
- .e-query-builder.e-device .e-summary-btndiv,
738
- .e-bigger.e-query-builder .e-summary-btndiv,
739
- .e-bigger .e-query-builder .e-summary-btndiv {
740
- padding: 15px;
741
- text-align: right;
742
- }
743
-
744
- *.e-device .e-rule-value {
745
- width: 100%;
746
- }
747
-
748
- *.e-bigger .e-group-body .e-rule-container .e-rule-filter, *.e-bigger .e-group-body .e-rule-container .e-rule-sub-filter, *.e-bigger .e-group-body .e-rule-container .e-operator, *.e-bigger .e-group-body .e-rule-container .e-value {
749
- padding: 16px 16px 16px 16px;
750
- }
751
-
752
- .e-query-builder {
753
- background: transparent;
754
- border-color: rgba(var(--color-sf-outline-variant));
755
- }
756
- .e-query-builder .e-group-header .e-btn-group {
757
- border-color: rgba(var(--color-sf-outline-variant));
758
- }
759
- .e-query-builder .e-group-container {
760
- border-color: rgba(var(--color-sf-outline-variant));
761
- }
762
- .e-query-builder .e-rule-container {
763
- background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.05), rgba(var(--color-sf-primary), 0.05)), rgba(var(--color-sf-surface));
764
- border-color: rgba(var(--color-sf-outline-variant));
765
- }
766
- .e-query-builder .e-rule-container.e-joined-rule {
767
- border-top-color: rgba(var(--color-sf-outline-variant));
768
- }
769
- .e-query-builder .e-rule-list .e-group-container {
770
- background: transparent;
771
- }
772
- .e-query-builder .e-rule-list > ::after, .e-query-builder .e-rule-list > ::before {
773
- border-color: rgba(var(--color-sf-outline-variant));
774
- }
775
- .e-query-builder .e-btn-group input:checked + label.e-btn, .e-query-builder .e-btn-group .e-btn.e-qb-toggle.e-active-toggle {
776
- background: rgba(var(--color-sf-primary));
777
- border-color: rgba(var(--color-sf-primary));
778
- color: rgba(var(--color-sf-on-primary));
779
- }
780
- .e-query-builder .e-removerule.e-btn.e-round {
781
- background: transparent;
782
- }
783
- .e-query-builder .e-removerule.e-btn.e-round.e-readonly {
784
- display: none;
785
- }
786
- .e-query-builder .e-summary-content textarea {
787
- background: transparent;
788
- color: rgba(var(--color-sf-on-surface));
789
- }
790
- .e-query-builder .e-collapse-rule {
791
- background: transparent;
792
- border-color: rgba(var(--color-sf-outline-variant));
793
- color: rgba(var(--color-sf-on-surface));
794
- }
795
- .e-query-builder .e-collapse-rule:focus, .e-query-builder .e-collapse-rule:active, .e-query-builder .e-collapse-rule:hover {
796
- background: rgba(var(--color-sf-outline-variant));
797
- }
798
-
799
- .e-tooltip-wrap.e-querybuilder-error,
800
- .e-control.e-tooltip-wrap.e-popup.e-querybuilder-error {
801
- background: rgba(var(--color-sf-error-container));
802
- border-color: rgba(var(--color-sf-error-container));
803
- }
804
-
805
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-top,
806
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-top {
807
- border-bottom-color: rgba(var(--color-sf-error-container));
808
- color: rgba(var(--color-sf-error-container));
809
- }
810
-
811
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-outer.e-tip-bottom,
812
- .e-tooltip-wrap.e-querybuilder-error .e-arrow-tip-inner.e-tip-bottom {
813
- border-top-color: rgba(var(--color-sf-error-container));
814
- color: rgba(var(--color-sf-error-container));
815
- }
816
-
817
- .e-tooltip-wrap.e-querybuilder-error .e-tip-content,
818
- .e-tooltip-wrap.e-querybuilder-error .e-tip-content label {
819
- color: rgba(var(--color-sf-error));
820
- }
1
+ @import '@syncfusion/ej2-querybuilder/styles/material3-dark.css';