@syncfusion/ej2-react-inplace-editor 23.2.5 → 24.1.41

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