@syncfusion/ej2-richtexteditor 18.4.34 → 18.4.42-70943

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 (92) hide show
  1. package/CHANGELOG.md +782 -718
  2. package/README.md +67 -67
  3. package/dist/ej2-richtexteditor.umd.min.js +1 -1
  4. package/dist/ej2-richtexteditor.umd.min.js.map +1 -1
  5. package/dist/es6/ej2-richtexteditor.es2015.js +271 -153
  6. package/dist/es6/ej2-richtexteditor.es2015.js.map +1 -1
  7. package/dist/es6/ej2-richtexteditor.es5.js +393 -275
  8. package/dist/es6/ej2-richtexteditor.es5.js.map +1 -1
  9. package/helpers/e2e/index.js +3 -3
  10. package/license +9 -9
  11. package/package.json +76 -53
  12. package/src/editor-manager/plugin/image.js +2 -1
  13. package/src/editor-manager/plugin/inserthtml.js +14 -10
  14. package/src/editor-manager/plugin/link.js +6 -6
  15. package/src/editor-manager/plugin/lists.js +6 -2
  16. package/src/editor-manager/plugin/ms-word-clean-up.js +22 -6
  17. package/src/editor-manager/plugin/selection-commands.d.ts +1 -0
  18. package/src/editor-manager/plugin/selection-commands.js +34 -3
  19. package/src/editor-manager/plugin/table.js +2 -1
  20. package/src/global.d.ts +1 -0
  21. package/src/rich-text-editor/actions/full-screen.d.ts +0 -1
  22. package/src/rich-text-editor/actions/full-screen.js +6 -4
  23. package/src/rich-text-editor/actions/keyboard-model.d.ts +13 -13
  24. package/src/rich-text-editor/actions/keyboard.js +21 -20
  25. package/src/rich-text-editor/actions/resize.js +3 -0
  26. package/src/rich-text-editor/base/constant.d.ts +5 -0
  27. package/src/rich-text-editor/base/constant.js +5 -0
  28. package/src/rich-text-editor/base/rich-text-editor-model.d.ts +701 -701
  29. package/src/rich-text-editor/base/rich-text-editor.js +61 -36
  30. package/src/rich-text-editor/formatter/html-formatter.js +13 -13
  31. package/src/rich-text-editor/formatter/markdown-formatter.js +13 -13
  32. package/src/rich-text-editor/models/iframe-settings-model.d.ts +21 -21
  33. package/src/rich-text-editor/models/iframe-settings.js +19 -19
  34. package/src/rich-text-editor/models/inline-mode-model.d.ts +9 -9
  35. package/src/rich-text-editor/models/inline-mode.js +19 -19
  36. package/src/rich-text-editor/models/toolbar-settings-model.d.ts +328 -328
  37. package/src/rich-text-editor/models/toolbar-settings.js +19 -19
  38. package/src/rich-text-editor/renderer/iframe-content-renderer.js +13 -13
  39. package/src/rich-text-editor/renderer/image-module.d.ts +2 -0
  40. package/src/rich-text-editor/renderer/image-module.js +28 -8
  41. package/src/rich-text-editor/renderer/table-module.js +6 -1
  42. package/styles/_all.scss +2 -2
  43. package/styles/bootstrap-dark.css +22 -1
  44. package/styles/bootstrap.css +22 -1
  45. package/styles/bootstrap4.css +22 -1
  46. package/styles/bootstrap5-dark.css +0 -0
  47. package/styles/bootstrap5-dark.scss +0 -0
  48. package/styles/bootstrap5.css +0 -0
  49. package/styles/bootstrap5.scss +0 -0
  50. package/styles/fabric-dark.css +22 -1
  51. package/styles/fabric.css +22 -1
  52. package/styles/highcontrast-light.css +22 -1
  53. package/styles/highcontrast.css +22 -1
  54. package/styles/material-dark.css +22 -1
  55. package/styles/material.css +22 -1
  56. package/styles/rich-text-editor/_all.scss +2 -2
  57. package/styles/rich-text-editor/_bootstrap-dark-definition.scss +151 -151
  58. package/styles/rich-text-editor/_bootstrap-definition.scss +184 -184
  59. package/styles/rich-text-editor/_bootstrap4-definition.scss +307 -307
  60. package/styles/rich-text-editor/_fabric-dark-definition.scss +150 -150
  61. package/styles/rich-text-editor/_fabric-definition.scss +148 -148
  62. package/styles/rich-text-editor/_highcontrast-definition.scss +148 -148
  63. package/styles/rich-text-editor/_highcontrast-light-definition.scss +148 -148
  64. package/styles/rich-text-editor/_layout.scss +1416 -1405
  65. package/styles/rich-text-editor/_material-dark-definition.scss +151 -151
  66. package/styles/rich-text-editor/_material-definition.scss +150 -150
  67. package/styles/rich-text-editor/_theme.scss +499 -489
  68. package/styles/rich-text-editor/bootstrap-dark.css +22 -1
  69. package/styles/rich-text-editor/bootstrap.css +22 -1
  70. package/styles/rich-text-editor/bootstrap4.css +22 -1
  71. package/styles/rich-text-editor/fabric-dark.css +22 -1
  72. package/styles/rich-text-editor/fabric.css +22 -1
  73. package/styles/rich-text-editor/highcontrast-light.css +22 -1
  74. package/styles/rich-text-editor/highcontrast.css +22 -1
  75. package/styles/rich-text-editor/icons/_bootstrap-dark.scss +289 -289
  76. package/styles/rich-text-editor/icons/_bootstrap.scss +288 -288
  77. package/styles/rich-text-editor/icons/_bootstrap4.scss +288 -288
  78. package/styles/rich-text-editor/icons/_fabric-dark.scss +288 -288
  79. package/styles/rich-text-editor/icons/_fabric.scss +288 -288
  80. package/styles/rich-text-editor/icons/_highcontrast-light.scss +288 -288
  81. package/styles/rich-text-editor/icons/_highcontrast.scss +288 -288
  82. package/styles/rich-text-editor/icons/_material-dark.scss +288 -288
  83. package/styles/rich-text-editor/icons/_material.scss +288 -288
  84. package/styles/rich-text-editor/material-dark.css +22 -1
  85. package/styles/rich-text-editor/material.css +22 -1
  86. package/styles/tailwind-dark.css +0 -0
  87. package/styles/tailwind-dark.scss +0 -0
  88. package/styles/tailwind.css +0 -0
  89. package/styles/tailwind.scss +0 -0
  90. package/dist/global/ej2-richtexteditor.min.js +0 -2
  91. package/dist/global/ej2-richtexteditor.min.js.map +0 -1
  92. package/dist/global/index.d.ts +0 -5
@@ -1,1405 +1,1416 @@
1
- @include export-module('richtexteditor-layout') {
2
- /*! tab layout */
3
-
4
- .e-bigger .e-richtexteditor,
5
- .e-richtexteditor.e-bigger {
6
-
7
- .e-rte-toolbar {
8
-
9
- .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
10
- margin-left: $rte-big-tb-items-margin-left;
11
- }
12
- }
13
-
14
- &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
15
- margin-left: 0;
16
- margin-right: $rte-big-tb-items-margin-left;
17
- }
18
-
19
- .e-rte-toolbar,
20
- .e-rte-toolbar.e-toolbar.e-extended-toolbar {
21
-
22
- .e-toolbar-extended {
23
- padding-left: $rte-big-tb-items-padding-left;
24
- }
25
-
26
- .e-toolbar-items,
27
- .e-toolbar-extended {
28
-
29
- .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
30
- font-size: 18px;
31
- }
32
-
33
- .e-toolbar-item .e-font-color .e-selected-color.e-icons::before,
34
- .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
35
- top: -20px;
36
- }
37
-
38
- .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn {
39
- padding-left: $rte-big-drop-btn-padding-left;
40
- padding-right: $rte-big-drop-btn-padding-right;
41
- }
42
-
43
- .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:hover,
44
- .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:focus,
45
- .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:active {
46
- padding-left: $rte-big-drop-btn-action-padding-left;
47
- padding-right: $rte-big-drop-btn-action-padding-right;
48
- }
49
-
50
- .e-toolbar-item.e-active .e-tbar-btn.e-btn {
51
- padding: $rte-big-active-tb-item-btn-padding;
52
- }
53
-
54
- .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content,
55
- .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content {
56
- line-height: $rte-big-split-btn-active-color-icon-line-height;
57
- }
58
- }
59
-
60
- .e-dropdown-btn .e-caret {
61
- font-size: $rte-big-dropdown-caret-icon-size;
62
- }
63
- }
64
- }
65
-
66
- .e-richtexteditor {
67
- color: $rte-content-color;
68
- display: block;
69
- position: relative;
70
-
71
- & textarea.e-content {
72
- border: 0;
73
- display: block;
74
- height: 100%;
75
- margin: 0;
76
- outline: 0;
77
- padding: 8px;
78
- resize: none;
79
- width: 100%;
80
- }
81
-
82
- & .e-rte-hidden {
83
- border: 0;
84
- display: block;
85
- height: 0;
86
- margin: 0;
87
- outline: 0;
88
- padding: 0;
89
- resize: none;
90
- visibility: hidden;
91
- width: 0;
92
- }
93
-
94
- &.e-disabled {
95
- pointer-events: none;
96
- }
97
-
98
- &.e-rte-full-screen {
99
- bottom: 0;
100
- height: 100% !important; // sass-lint:disable-line no-important
101
- left: 0;
102
- position: fixed;
103
- right: 0;
104
- top: 0;
105
- width: 100% !important; // sass-lint:disable-line no-important
106
- z-index: 999;
107
- }
108
-
109
- &.e-rtl .e-rte-character-count {
110
- left: 0;
111
- padding-left: 30px;
112
- padding-right: unset;
113
- right: unset;
114
- }
115
-
116
- .e-rte-toolbar {
117
-
118
- .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
119
- margin-left: $rte-tb-items-margin-left;
120
- }
121
- }
122
-
123
- &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
124
- margin-left: 0;
125
- margin-right: $rte-tb-items-margin-left;
126
- }
127
-
128
- .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
129
- margin-left: 0;
130
- margin-right: 0;
131
- overflow-x: auto;
132
- white-space: nowrap;
133
- width: 100%;
134
- }
135
-
136
- .e-rte-toolbar,
137
- .e-rte-toolbar.e-toolbar.e-extended-toolbar {
138
- position: inherit;
139
- z-index: 101;
140
-
141
- .e-toolbar-extended {
142
- margin-left: 0;
143
- padding-left: $rte-tb-items-padding-left;
144
- }
145
-
146
- .e-toolbar-items,
147
- .e-toolbar-extended {
148
-
149
- .e-toolbar-item {
150
-
151
- .e-formats-tbar-btn > :first-child {
152
- min-width: $rte-format-btn-min-width;
153
- }
154
-
155
- .e-font-name-tbar-btn > :first-child {
156
- min-width: $rte-font-name-btn-min-width;
157
- }
158
-
159
- .e-font-size-tbar-btn > :first-child {
160
- min-width: $rte-font-size-btn-min-width;
161
- }
162
-
163
- .e-dropdown-btn {
164
- padding-left: $rte-drop-btn-padding-left;
165
- padding-right: $rte-drop-btn-padding-right;
166
-
167
- .e-rte-dropdown-btn-text {
168
- font-weight: 500;
169
- overflow: hidden;
170
- text-overflow: ellipsis;
171
- white-space: nowrap;
172
- }
173
- }
174
-
175
- .e-dropdown-btn:hover,
176
- .e-dropdown-btn:focus,
177
- .e-dropdown-btn:active {
178
- padding-left: $rte-drop-btn-action-padding-left;
179
- padding-right: $rte-drop-btn-action-padding-right;
180
- }
181
-
182
- .e-font-color .e-selected-color.e-icons::before {
183
-
184
- font-size: 12px;
185
- position: relative;
186
- top: -18px;
187
- }
188
-
189
- .e-font-color.e-icons::before {
190
- font-size: 13px;
191
- }
192
-
193
- .e-background-color.e-icons::before {
194
- display: inline;
195
- font-size: 14px;
196
- }
197
-
198
- .e-rte-fontcolor-dropdown.e-active .e-rte-color-content,
199
- .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content {
200
- line-height: $rte-split-btn-active-color-icon-line-height;
201
- }
202
-
203
- .e-tbar-btn {
204
-
205
- .e-icons.e-btn-icon:not(.e-caret) {
206
- font-size: 16px;
207
- }
208
- }
209
-
210
- &.e-active .e-tbar-btn.e-btn {
211
- padding: $rte-active-tb-item-btn-padding;
212
- }
213
- }
214
- }
215
-
216
- &.e-control[class*='e-toolbar'] {
217
- box-sizing: border-box;
218
- }
219
-
220
- .e-toolbar-extended.e-visible {
221
- display: block;
222
- visibility: hidden;
223
- }
224
-
225
- &.e-tbar-ios-fixed.e-rte-tb-fixed {
226
- top: 0;
227
- transform: translate3d(0, 0, 0);
228
- }
229
-
230
- &.e-rte-tb-fixed:not(.e-tbar-ios-fixed) {
231
- bottom: 0;
232
- }
233
-
234
- &.e-rte-tb-fixed {
235
- display: none;
236
- left: 0;
237
- position: fixed;
238
- right: 0;
239
-
240
- &.e-show {
241
- display: block;
242
- z-index: 101;
243
- }
244
- }
245
-
246
- &.e-rte-tb-float {
247
- position: fixed;
248
- top: 0;
249
-
250
- &.e-rte-tb-abs-float {
251
- position: absolute;
252
- }
253
- }
254
-
255
- .e-dropdown-btn .e-caret {
256
- font-size: $rte-dropdown-caret-icon-size;
257
- }
258
- }
259
-
260
- .rte-placeholder {
261
- color: $rte-content-font-color;
262
- line-height: $rte-placeholder-line-height;
263
- opacity: 00.54;
264
- overflow: hidden;
265
- position: absolute;
266
- text-align: start;
267
- top: 0;
268
- z-index: 1;
269
- }
270
-
271
- .e-rte-content {
272
- position: relative;
273
- z-index: 1;
274
- }
275
-
276
- .e-rte-content,
277
- .e-source-content {
278
- // sass-lint:disable no-vendor-prefixes
279
- -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
280
- // sass-lint:enabled no-vendor-prefixes
281
- overflow: auto;
282
- transition: 100ms ease-out;
283
- width: 100%;
284
-
285
- .e-content {
286
- background: unset;
287
- box-sizing: border-box;
288
- height: 100%;
289
- min-height: 100px;
290
- outline: 0 solid transparent;
291
- overflow-x: auto;
292
- padding: 16px;
293
- position: relative;
294
- text-align: inherit;
295
- z-index: 2;
296
-
297
- @media screen and (min-width: 992px) {
298
- font-size: $rte-content-font-size;
299
- }
300
- }
301
-
302
- .e-content p {
303
- margin: 0 0 10px;
304
- margin-bottom: 10px;
305
- }
306
-
307
- .e-content li {
308
- margin-bottom: 10px;
309
- }
310
-
311
- .e-content h1 {
312
- font-size: 2.17em;
313
- font-weight: 400;
314
- line-height: 1;
315
- margin: 10px 0;
316
- }
317
-
318
- .e-content h2 {
319
- font-size: 1.74em;
320
- font-weight: 400;
321
- margin: 10px 0;
322
- }
323
-
324
- .e-content h3 {
325
- font-size: 1.31em;
326
- font-weight: 400;
327
- margin: 10px 0;
328
- }
329
-
330
- .e-content h4 {
331
- font-size: 16px;
332
- font-weight: 400;
333
- line-height: 1.5;
334
- margin: 0;
335
- }
336
-
337
- .e-content h5 {
338
- font-size: 00.8em;
339
- font-weight: 400;
340
- margin: 0;
341
- }
342
-
343
- .e-content h6 {
344
- font-size: 00.65em;
345
- font-weight: 400;
346
- margin: 0;
347
- }
348
-
349
- .e-content blockquote {
350
- margin: 10px 0;
351
- margin-left: 0;
352
- padding-left: 5px;
353
- }
354
-
355
- .e-content pre {
356
- background-color: inherit;
357
- border: 0;
358
- border-radius: 0;
359
- color: $rte-content-color;
360
- font-size: inherit;
361
- line-height: inherit;
362
- margin: 0 0 10px;
363
- overflow: visible;
364
- padding: 0;
365
- white-space: pre-wrap;
366
- word-break: inherit;
367
- word-wrap: break-word;
368
- }
369
-
370
- .e-content strong,
371
- .e-content b {
372
- font-weight: 700;
373
- }
374
-
375
- .e-content a {
376
- text-decoration: none;
377
- user-select: auto;
378
- }
379
-
380
- .e-content a:hover {
381
- text-decoration: underline;
382
- }
383
-
384
- .e-content p:last-child,
385
- .e-content pre:last-child,
386
- .e-content blockquote:last-child {
387
- margin-bottom: 0;
388
- }
389
-
390
- .e-content h3+h4,
391
- .e-content h4+h5,
392
- .e-content h5+h6 {
393
- margin-top: 00.6em;
394
- }
395
-
396
- .e-content ul:last-child {
397
- margin-bottom: 0;
398
- }
399
-
400
- }
401
-
402
- .e-rte-character-count {
403
- bottom: 0;
404
- color: $rte-default-character-count-color;
405
- font-family: 'Times New Roman', Georgia, Serif;
406
- font-size: 14px;
407
- margin-right: 30px;
408
- opacity: 00.54;
409
- padding-bottom: 2px;
410
- position: absolute;
411
- right: 0;
412
- z-index: 100;
413
-
414
- &.e-warning {
415
- color: $rte-warning-character-count-color;
416
- opacity: unset;
417
- }
418
-
419
- &.e-error {
420
- color: $rte-error-character-count-color;
421
- opacity: unset;
422
- }
423
-
424
- }
425
-
426
- .e-rte-srctextarea {
427
- background-color: transparent;
428
- border: 0;
429
- color: $rte-content-color;
430
- display: block;
431
- height: 100%;
432
- line-height: 22px;
433
- min-height: 200px;
434
- overflow: auto;
435
- padding: 16px;
436
- resize: none;
437
- transition: 100ms ease-out;
438
- width: 100%;
439
- }
440
-
441
- img::selection {
442
- background: transparent;
443
- color: transparent;
444
- }
445
-
446
- .e-resize-handle {
447
- height: $rte-resize-handler-height;
448
- position: absolute;
449
- width: $rte-resize-handler-width;
450
-
451
- &.e-south-east {
452
- bottom: $rte-resize-handler-position;
453
- cursor: nwse-resize;
454
- right: $rte-resize-handler-position;
455
- z-index: 100;
456
- }
457
- }
458
-
459
- &.e-rte-tb-expand {
460
- &.e-rte-fixed-tb-expand {
461
- transition: none;
462
- }
463
- }
464
- }
465
-
466
- .e-rte-linkcontent .e-rte-label {
467
- padding-top: $rte-insert-dialog-label-padding-top;
468
- }
469
-
470
- .e-rte-label label {
471
- font-weight: normal;
472
- }
473
-
474
- .e-rte-linkcontent .e-rte-label:first-child {
475
- padding-top: 0;
476
- }
477
-
478
- .e-bigger .e-rte-dropdown-popup {
479
-
480
- ul {
481
- min-width: 84px;
482
- }
483
- }
484
-
485
- .e-rte-dropdown-popup {
486
-
487
- &.e-rte-inline-dropdown {
488
-
489
- @media screen and (max-width: 768px) {
490
- ul {
491
- padding: 7px 0;
492
-
493
- li.e-item {
494
- height: 34px;
495
- line-height: 34px;
496
- padding: 0 6.5px;
497
- }
498
-
499
- .e-item .e-menu-icon {
500
- float: none;
501
- }
502
- }
503
- }
504
-
505
- &.e-rte-dropdown-icons.e-dropdown-popup {
506
-
507
- @media screen and (max-width: 768px) {
508
- max-height: 280px;
509
-
510
- ul {
511
- display: inline-flex;
512
- }
513
- }
514
- }
515
-
516
- }
517
-
518
- ul {
519
- min-width: 82px;
520
-
521
- .e-item {
522
-
523
- .e-menu-icon {
524
- margin: 0 6px;
525
- width: auto;
526
- }
527
-
528
- &.e-h1 {
529
- font-size: 2em;
530
- font-weight: bold;
531
- height: 40px;
532
- line-height: 40px;
533
- }
534
-
535
- &.e-h2 {
536
- font-size: 1.5em;
537
- font-weight: bold;
538
- height: 40px;
539
- line-height: 40px;
540
- }
541
-
542
- &.e-h3 {
543
- font-size: 1.16em;
544
- font-weight: bold;
545
- }
546
-
547
- &.e-h4 {
548
- font-size: 1em;
549
- font-weight: bold;
550
- }
551
-
552
- &.e-h5 {
553
- font-size: .83em;
554
- font-weight: bold;
555
- }
556
-
557
- &.e-h6 {
558
- font-size: .7em;
559
- font-weight: bold;
560
- }
561
-
562
- &.e-segoe-ui {
563
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
564
- }
565
-
566
- &.e-arial {
567
- font-family: Arial, Helvetica, sans-serif;
568
- }
569
-
570
- &.e-courier-new {
571
- font-family: Courier New, Courier, monospace;
572
- }
573
-
574
- &.e-georgia {
575
- font-family: Georgia, 'Times New Roman', Times, serif;
576
- }
577
-
578
- &.e-helvetica-neue {
579
- font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
580
- }
581
-
582
- &.e-impact {
583
- font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
584
- }
585
-
586
- &.e-lucida-console {
587
- font-family: Lucida Console, Monaco, monospace;
588
- }
589
-
590
- &.e-tahoma {
591
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
592
- }
593
-
594
- &.e-times-new-roman {
595
- font-family: 'Times New Roman', Times, serif;
596
- }
597
-
598
- &.e-trebuchet-ms {
599
- font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
600
- }
601
-
602
- &.e-verdana {
603
- font-family: Verdana, Geneva, Tahoma, sans-serif;
604
- }
605
-
606
- &.e-roboto {
607
- font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
608
- }
609
-
610
- }
611
- }
612
-
613
- &.e-rte-dropdown-icons {
614
-
615
- ul {
616
- min-width: auto;
617
- }
618
-
619
- @media screen and (max-width: 768px) {
620
-
621
- ul {
622
- min-width: 30px;
623
- }
624
- }
625
- }
626
- }
627
-
628
- .e-rte-image.e-imgbreak {
629
- border: 0;
630
- cursor: pointer;
631
- display: block;
632
- float: none;
633
- margin: 5px auto;
634
- max-width: 100%;
635
- position: relative;
636
- }
637
-
638
- .e-rte-image {
639
- border: 0;
640
- cursor: pointer;
641
- display: block;
642
- float: none;
643
- margin: auto;
644
- max-width: 100%;
645
- position: relative;
646
- }
647
-
648
- .e-rte-image.e-imginline {
649
- display: inline-block;
650
- float: none;
651
- margin-left: 5px;
652
- margin-right: 5px;
653
- max-width: calc(100% - (2 * 5px));
654
- vertical-align: bottom;
655
- }
656
-
657
- .e-rte-image.e-imgcenter {
658
- cursor: pointer;
659
- display: block;
660
- float: none;
661
- margin: 5px auto;
662
- max-width: 100%;
663
- position: relative;
664
- }
665
-
666
- .e-rte-image.e-imgleft {
667
- float: left;
668
- margin: 0 auto;
669
- margin-right: 5px;
670
- text-align: left;
671
- }
672
-
673
- .e-rte-image.e-imgright {
674
- float: right;
675
- margin: 0 auto;
676
- margin-left: 5px;
677
- text-align: right;
678
- }
679
-
680
- .e-rte-img-popup .e-item {
681
- height: 106px;
682
- width: 300px;
683
- }
684
-
685
- .e-rte-img-caption {
686
- display: inline-block;
687
- margin: 5px auto;
688
- max-width: 100%;
689
- position: relative;
690
- }
691
-
692
- .e-rte-img-caption.e-caption-inline {
693
- display: inline-block;
694
- margin: 5px auto;
695
- margin-left: 5px;
696
- margin-right: 5px;
697
- max-width: calc(100% - (2 * 5px));
698
- position: relative;
699
- text-align: center;
700
- vertical-align: bottom;
701
- }
702
-
703
- .e-rte-img-caption.e-imgcenter {
704
- display: block;
705
- margin-left: auto;
706
- margin-right: auto;
707
- }
708
-
709
- .e-rte-img-caption.e-imgright {
710
- display: block;
711
- margin-left: auto;
712
- margin-right: 0;
713
- }
714
-
715
- .e-rte-img-caption.e-imgleft {
716
- display: block;
717
- margin-left: 0;
718
- margin-right: auto;
719
- }
720
-
721
- .e-rte-img-caption .e-rte-image.e-imgright {
722
- float: none;
723
- margin-left: auto;
724
- margin-right: 0;
725
- }
726
-
727
- .e-rte-img-caption .e-rte-image.e-imgleft {
728
- float: none;
729
- margin: 0;
730
- }
731
-
732
- .e-rte-table {
733
- border-collapse: collapse;
734
- empty-cells: show;
735
- }
736
-
737
- .e-rte-table td,
738
- .e-rte-table th {
739
- border: 1px solid $rte-table-border-color;
740
- height: 20px;
741
- min-width: 20px;
742
- padding: 2px 5px;
743
- vertical-align: middle;
744
- }
745
-
746
- .e-rte-table.e-dashed-border td,
747
- .e-rte-table.e-dashed-border th {
748
- border-style: dashed;
749
- }
750
-
751
- .e-rte-img-caption .e-img-inner {
752
- box-sizing: border-box;
753
- display: block;
754
- font-size: 16px;
755
- font-weight: initial;
756
- margin: auto;
757
- opacity: .9;
758
- position: relative;
759
- text-align: center;
760
- width: 100%;
761
- }
762
-
763
- .e-rte-img-caption .e-img-wrap {
764
- display: inline-block;
765
- margin: auto;
766
- padding: 0;
767
- width: 100%;
768
- }
769
-
770
- .e-rte-img-dialog .e-rte-label {
771
- padding-top: $rte-insert-dialog-label-padding-top;
772
- }
773
-
774
- .e-rte-img-dialog .e-rte-label:first-child {
775
- padding-top: 0;
776
- }
777
-
778
- .e-rte-table-resize.e-row-resize,
779
- .e-rte-table-resize.e-column-resize {
780
- background-color: transparent;
781
- background-repeat: repeat;
782
- bottom: 0;
783
- cursor: col-resize;
784
- height: 1px;
785
- overflow: visible;
786
- position: absolute;
787
- width: 1px;
788
- }
789
-
790
- .e-rte-table-resize.e-row-resize {
791
- cursor: row-resize;
792
- height: 1px;
793
- }
794
-
795
- .e-richtexteditor {
796
- .e-linkheader {
797
- font-family: $rte-font-family;
798
- font-size: 15px;
799
- opacity: .87;
800
- padding-bottom: $rte-insert-dialog-label-padding-bottom;
801
- padding-top: $rte-insert-dialog-label-padding-top;
802
- }
803
-
804
- .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
805
- .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
806
- margin-top: 0;
807
- }
808
-
809
- .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
810
- border-bottom: 0 solid transparent;
811
- min-height: initial;
812
- }
813
-
814
- .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container {
815
- margin-left: 0;
816
- }
817
-
818
- .e-img-uploadwrap.e-droparea .e-upload .e-upload-files {
819
- border-top: 0 solid transparent;
820
- }
821
-
822
- .e-img-uploadwrap.e-droparea .e-file-select-wrap {
823
- display: none;
824
- }
825
-
826
- .e-img-uploadwrap.e-droparea .e-upload {
827
- border: 0 solid transparent;
828
- float: none;
829
- }
830
-
831
- .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn {
832
- display: block;
833
- height: 36px;
834
- margin: -50px auto;
835
- padding: 0 18px;
836
- }
837
-
838
- .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn {
839
- display: none;
840
- }
841
-
842
- .e-dialog .e-img-uploadwrap.e-droparea {
843
- line-height: 10;
844
- min-height: 50px;
845
- position: relative;
846
- }
847
-
848
- .e-dialog .e-img-uploadwrap.e-droparea .e-rte-upload-text {
849
- display: inline-block;
850
- line-height: normal;
851
- }
852
-
853
- .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea {
854
- line-height: 4;
855
- }
856
-
857
- .e-rte-inline-dropdown ul {
858
- max-height: 200px;
859
- overflow-y: auto;
860
- }
861
-
862
- .e-rte-dropdown-popup.e-rte-dropdown-items ul {
863
- max-height: 280px;
864
- overflow-y: auto;
865
- }
866
-
867
- .e-bigger .e-rte-dropdown-popup.e-rte-dropdown-items ul {
868
- max-height: 360px;
869
- overflow-y: auto;
870
- }
871
-
872
- .e-rte-inline-dropdown.e-rte-backgroundcolor-dropdown,
873
- .e-rte-inline-dropdown.e-rte-fontcolor-dropdown {
874
- line-height: 0;
875
- }
876
-
877
- .e-rte-inline-dropdown .e-rte-color-content .e-rte-elements {
878
- border-bottom-style: solid;
879
- border-bottom-width: 3px;
880
- line-height: $rte-font-icon-line-height;
881
- padding-bottom: 1px;
882
- }
883
-
884
- .e-rte-table-popup.e-popup.e-popup-open {
885
- border-radius: 0;
886
- box-shadow: $rte-table-popup-box;
887
- font-size: 14px;
888
- font-weight: normal;
889
- min-width: 120px;
890
- overflow: hidden;
891
- padding: 10px;
892
- }
893
-
894
- .e-rte-table-popup.e-popup-open .e-rte-tablecell {
895
- border: $rte-table-span-border;
896
- display: inline-block;
897
- height: 14px;
898
- margin: 1px;
899
- overflow: hidden;
900
- vertical-align: top;
901
- width: 14px;
902
- }
903
-
904
- .e-rte-table-popup.e-popup-open .e-rte-table-row {
905
- height: 16px;
906
- }
907
-
908
- .e-rte-table-popup.e-popup-open .e-insert-table-btn {
909
- width: 100%;
910
- }
911
-
912
- .e-rte-edit-table .e-rte-field {
913
- padding-top: $rte-insert-dialog-label-padding-top;
914
- }
915
-
916
- .e-rte-edit-table .e-rte-field:first-child {
917
- padding-top: 0;
918
- }
919
-
920
- .e-rte-content .e-content table td.e-cell-select,
921
- .e-rte-content .e-content table th.e-cell-select {
922
- border: 1px double $rte-table-select-border-color;
923
- height: 24.67px;
924
- }
925
-
926
- span.e-table-box {
927
- cursor: nwse-resize;
928
- display: block;
929
- height: 10px;
930
- position: absolute;
931
- width: 10px;
932
- }
933
-
934
- span.e-table-box.e-rmob {
935
- height: 14px;
936
- width: 14px;
937
- }
938
-
939
- .e-upload .e-upload-files .e-upload-file-list .e-file-container {
940
- margin-right: 50px;
941
- }
942
-
943
- .e-rte-upload-popup {
944
- width: 250px;
945
- }
946
-
947
- .e-rte-dialog-upload .e-upload-files {
948
- border-top: 0;
949
- }
950
-
951
- .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
952
- border-bottom: 0;
953
- }
954
-
955
- }
956
-
957
- .e-rte-backgroundcolor-colorpicker,
958
- .e-rte-fontcolor-colorpicker {
959
- & .e-color-palette.e-container {
960
- & .e-custom-palette .e-palette {
961
- padding: 0;
962
- }
963
-
964
- & .e-switch-ctrl-btn {
965
- padding: 5px;.e-bigger & {
966
- padding: 5px;
967
- }
968
- }
969
-
970
- }
971
-
972
- }
973
-
974
- .e-rte-quick-popup {
975
- border-radius: 2px;
976
- overflow: hidden;
977
-
978
- .e-rte-quick-toolbar {
979
- border-radius: 2px;
980
- min-height: 42px;
981
-
982
- .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
983
- white-space: nowrap;
984
- }
985
-
986
- &.e-remove-white-space {
987
-
988
- .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
989
- white-space: nowrap;
990
- }
991
- }
992
-
993
- .e-toolbar-items:not(.e-tbar-pos) {
994
- border-radius: 2px;
995
- margin: 0 6px;
996
- min-height: 42px;
997
-
998
- .e-toolbar-item.e-rte-horizontal-separator,
999
- .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
1000
- display: block;
1001
- height: 1px;
1002
- margin: 0;
1003
- min-height: 1px;
1004
- }
1005
-
1006
- .e-toolbar-item {
1007
- margin: 0 6px;
1008
- min-height: 42px;
1009
-
1010
- &:first-child,
1011
- &:last-child {
1012
- margin: 0 6px;
1013
- }
1014
-
1015
- .e-tbar-btn:not(.e-rte-dropdown-btn) {
1016
- line-height: 20px;
1017
- }
1018
-
1019
- .e-tbar-btn:not(.e-rte-dropdown-btn) .e-icons {
1020
- min-width: $rte-quick-item-icon-min-width;
1021
- }
1022
- }
1023
-
1024
- .e-toolbar-item .e-btn,
1025
- .e-toolbar-item .e-btn:hover {
1026
- min-height: $rte-quick-item-btn-height;
1027
- min-width: $rte-quick-item-btn-width;
1028
- padding: $rte-quick-item-padding;
1029
- }
1030
- }
1031
-
1032
- .e-tbar-btn {
1033
-
1034
- .e-icons.e-btn-icon:not(.e-caret) {
1035
- font-size: 16px;
1036
- }
1037
- }
1038
-
1039
- .e-background-color.e-icons::before {
1040
- display: inline;
1041
- }
1042
-
1043
- .e-rte-backgroundcolor-dropdown .e-btn-icon.e-caret {
1044
- font-size: 10px;
1045
- }
1046
- }
1047
-
1048
- .e-rte-dropdown-btn.e-tbar-btn {
1049
- line-height: $rte-quick-drop-btn-line-height;
1050
- margin: $rte-quick-drop-btn-margin;
1051
- padding: $rte-quick-drop-btn-padding;
1052
-
1053
- .e-rte-dropdown-btn-text {
1054
- font-weight: 500;
1055
- overflow: hidden;
1056
- text-overflow: ellipsis;
1057
- white-space: nowrap;
1058
- }
1059
-
1060
- .e-icons:not(.e-caret) {
1061
- font-size: 14px;
1062
- margin-left: -3px;
1063
- }
1064
-
1065
- .e-caret {
1066
- font-size: $rte-quick-drop-btn-caret-font-size;
1067
- width: 12px;
1068
- }
1069
- }
1070
-
1071
- &.e-hide {
1072
- display: block;
1073
- visibility: hidden;
1074
- }
1075
-
1076
- }
1077
-
1078
- .e-bigger .e-rte-quick-popup {
1079
- .e-rte-quick-toolbar {
1080
- min-height: 48px;
1081
-
1082
- .e-toolbar-items:not(.e-tbar-pos) {
1083
- margin: 0 6px;
1084
- min-height: 48px;
1085
-
1086
- .e-toolbar-item:not(.e-separator) {
1087
- margin: 0 6px;
1088
- min-height: 48px;
1089
- min-width: 36px;
1090
- padding: 0;
1091
- }
1092
-
1093
- .e-toolbar-item .e-tbar-btn:not(.e-rte-dropdown-btn) {
1094
- line-height: $rte-big-quick-item-line-height;
1095
- }
1096
-
1097
- .e-toolbar-item .e-btn,
1098
- .e-toolbar-item .e-btn:hover {
1099
- min-height: $rte-big-quick-item-btn-height;
1100
- min-width: $rte-big-quick-item-btn-width;
1101
- padding: $rte-big-quick-item-padding;
1102
- }
1103
-
1104
- .e-toolbar-item:first-child,
1105
- .e-toolbar-item:last-child {
1106
- margin: 0 6px;
1107
- }
1108
-
1109
- .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1110
- height: $rte-big-quick-tbar-item-min-height;
1111
- line-height: normal;
1112
- margin: 0;
1113
- min-height: $rte-big-quick-tbar-item-min-height;
1114
- min-width: $rte-big-quick-tbar-item-min-width;
1115
- }
1116
-
1117
- .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
1118
- font-size: 18px;
1119
- }
1120
- }
1121
- }
1122
-
1123
- .e-rte-dropdown-btn.e-tbar-btn {
1124
- line-height: $rte-big-quick-drop-btn-line-height;
1125
- margin: $rte-big-quick-drop-btn-margin;
1126
- padding: $rte-big-quick-drop-btn-padding;
1127
-
1128
- .e-icons:not(.e-caret) {
1129
- font-size: 16px;
1130
- }
1131
-
1132
- .e-caret {
1133
- font-size: $rte-big-quick-drop-btn-caret-font-size;
1134
- width: 20px;
1135
- }
1136
- }
1137
- }
1138
-
1139
- .e-bigger .e-richtexteditor,
1140
- .e-richtexteditor.e-bigger,
1141
- .e-richtexteditor {
1142
-
1143
- & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
1144
- & .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
1145
- & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
1146
- & .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
1147
-
1148
- & .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
1149
- & .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
1150
- display: flex;
1151
- padding-left: $rte-colorpicker-parent-padding;
1152
- padding-right: $rte-colorpicker-parent-padding;
1153
-
1154
- &:hover,
1155
- &:active,
1156
- &.e-active,
1157
- &.e-active:hover {
1158
- padding-left: $rte-colorpicker-parent-padding-hover;
1159
- padding-right: $rte-colorpicker-parent-padding-hover;
1160
- }
1161
-
1162
- &.e-active:hover {
1163
- padding-bottom: $rte-colorpicker-parent-padding-active-hover;
1164
- padding-top: $rte-colorpicker-parent-padding-active-hover;
1165
- }
1166
-
1167
- & .e-rte-color-content {
1168
- position: relative;
1169
- vertical-align: middle;
1170
- width: $rte-font-icon-width;
1171
-
1172
- & .e-rte-elements {
1173
- border-bottom-style: solid;
1174
- border-bottom-width: 3px;
1175
- line-height: $rte-font-icon-line-height;
1176
- padding-bottom: 1px;
1177
- }
1178
- }
1179
-
1180
- .e-rte-color-content::after {
1181
- content: '';
1182
- height: 100%;
1183
- position: absolute;
1184
- right: 0;
1185
- width: $rte-split-btn-bar-size;
1186
- }
1187
-
1188
- & .e-icons.e-btn-icon {
1189
- display: flex;
1190
- flex-direction: column;
1191
- justify-content: center;
1192
- line-height: 1;
1193
- min-width: $rte-font-arrow-width;
1194
- text-align: center;
1195
- width: $rte-font-arrow-width;
1196
- }
1197
- }
1198
- }
1199
- }
1200
-
1201
- .e-bigger .e-richtexteditor,
1202
- .e-richtexteditor.e-bigger {
1203
- & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
1204
- & .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
1205
- & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
1206
- & .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
1207
- & .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
1208
- & .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
1209
- & .e-icons.e-btn-icon {
1210
- min-width: $rte-font-arrow-touch-width;
1211
- width: $rte-font-arrow-touch-width;
1212
- }
1213
- }
1214
- }
1215
- }
1216
-
1217
- .e-popup-modal.e-popup.e-popup-open {
1218
- display: inline-flex;
1219
- }
1220
-
1221
- .e-rte-modal-popup.e-popup-container.e-center {
1222
- justify-content: center;
1223
- }
1224
-
1225
- .e-rte-modal-popup.e-popup-container {
1226
- align-items: center;
1227
- display: none;
1228
- height: 100%;
1229
- left: 0;
1230
- position: fixed;
1231
- top: 0;
1232
- width: 100%;
1233
- z-index: 10000;
1234
- }
1235
-
1236
- .e-popup-overlay {
1237
- height: 100%;
1238
- left: 0;
1239
- opacity: .5;
1240
- position: absolute;
1241
- top: 0;
1242
- width: 100%;
1243
- }
1244
-
1245
- .e-bigger .e-rte-table-popup.e-popup-open .e-rte-tablecell {
1246
- height: 16px;
1247
- width: 16px;
1248
- }
1249
-
1250
- .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
1251
- height: 18px;
1252
- }
1253
-
1254
- .e-table-rhelper {
1255
- cursor: col-resize;
1256
- opacity: .87;
1257
- position: absolute;
1258
- }
1259
-
1260
- .e-table-rhelper.e-column-helper {
1261
- width: 1px;
1262
- }
1263
-
1264
- .e-table-rhelper.e-row-helper {
1265
- height: 1px;
1266
- }
1267
-
1268
- .e-reicon::before {
1269
- border-bottom: 6px solid transparent;
1270
- border-right: 6px solid;
1271
- border-top: 6px solid transparent;
1272
- content: '';
1273
- display: block;
1274
- height: 0;
1275
- position: absolute;
1276
- right: 4px;
1277
- top: 4px;
1278
- width: 20px;
1279
- }
1280
-
1281
- .e-reicon::after {
1282
- border-bottom: 6px solid transparent;
1283
- border-left: 6px solid;
1284
- border-top: 6px solid transparent;
1285
- content: '';
1286
- display: block;
1287
- height: 0;
1288
- left: 4px;
1289
- position: absolute;
1290
- top: 4px;
1291
- width: 20px;
1292
- z-index: 3;
1293
- }
1294
-
1295
- .e-row-helper.e-reicon::after {
1296
- top: 10px;
1297
- transform: rotate(90deg);
1298
- }
1299
-
1300
- .e-row-helper.e-reicon::before {
1301
- left: 4px;
1302
- top: -20px;
1303
- transform: rotate(90deg);
1304
- }
1305
-
1306
- .e-rte-overflow {
1307
- overflow: hidden;
1308
- }
1309
-
1310
- .e-rte-dialog-minheight {
1311
- min-height: 296px;
1312
- }
1313
-
1314
- .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
1315
- background-size: 700px 190px;
1316
- min-height: 190px;
1317
- }
1318
-
1319
- .e-bigger .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
1320
- .e-bigger.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
1321
- background-size: 700px 190px;
1322
- min-height: 190px;
1323
- }
1324
-
1325
- .e-rte-table.e-rte-table-border {
1326
- border: 1px solid $rte-table-border-color;
1327
- border-collapse: separate;
1328
- }
1329
-
1330
- .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal {
1331
- .e-img-uploadwrap.e-droparea {
1332
- line-height: 10;
1333
- min-height: 50px;
1334
- position: relative;
1335
-
1336
- .e-browsebtn {
1337
- display: block;
1338
- height: 36px;
1339
- margin: -50px auto;
1340
- padding: 0 18px;
1341
- }
1342
-
1343
- .e-upload {
1344
- border: 0 solid transparent;
1345
- float: none;
1346
- }
1347
-
1348
- .e-file-select-wrap {
1349
- display: none;
1350
- }
1351
- }
1352
-
1353
- .e-linkheader {
1354
- font-family: $rte-font-family;
1355
- font-size: 15px;
1356
- opacity: .87;
1357
- padding-bottom: $rte-insert-dialog-label-padding-bottom;
1358
- padding-top: $rte-insert-dialog-label-padding-top;
1359
- }
1360
- }
1361
-
1362
- .e-rte-file-manager-dialog {
1363
-
1364
- .e-rte-label {
1365
- padding-bottom: 8px;
1366
- padding-top: 15px;
1367
-
1368
- label {
1369
- font-size: 15px;
1370
- opacity: .87;
1371
- }
1372
- }
1373
- }
1374
-
1375
- // Blazor styles start
1376
- .e-rte-upload-popup.e-dialog .e-file-select-wrap {
1377
- display: none;
1378
- }
1379
-
1380
- .e-rte-upload-popup.e-dialog .e-dlg-content {
1381
- overflow: hidden;
1382
- padding: 0;
1383
- }
1384
-
1385
- .e-hide.e-rte-quick-popup-hide {
1386
- display: none;
1387
- }
1388
-
1389
- .e-rte-popup-hide {
1390
- display: none;
1391
- }
1392
-
1393
- .e-rte-hide-visible {
1394
- visibility: hidden;
1395
- }
1396
-
1397
- .e-rte-table-popup.e-dialog .e-dlg-content {
1398
- padding: 0;
1399
- }
1400
-
1401
- .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
1402
- margin: 0;
1403
- }
1404
- // Blazor styles end
1405
- }
1
+ @include export-module('richtexteditor-layout') {
2
+ /*! tab layout */
3
+
4
+ .e-bigger .e-richtexteditor,
5
+ .e-richtexteditor.e-bigger {
6
+
7
+ .e-rte-toolbar {
8
+
9
+ .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
10
+ margin-left: $rte-big-tb-items-margin-left;
11
+ }
12
+ }
13
+
14
+ &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
15
+ margin-left: 0;
16
+ margin-right: $rte-big-tb-items-margin-left;
17
+ }
18
+
19
+ .e-rte-toolbar,
20
+ .e-rte-toolbar.e-toolbar.e-extended-toolbar {
21
+
22
+ .e-toolbar-extended {
23
+ padding-left: $rte-big-tb-items-padding-left;
24
+ }
25
+
26
+ .e-toolbar-items,
27
+ .e-toolbar-extended {
28
+
29
+ .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
30
+ font-size: 18px;
31
+ }
32
+
33
+ .e-toolbar-item .e-font-color .e-selected-color.e-icons::before,
34
+ .e-toolbar-item .e-background-color .e-selected-color.e-icons::before {
35
+ top: -20px;
36
+ }
37
+
38
+ .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn {
39
+ padding-left: $rte-big-drop-btn-padding-left;
40
+ padding-right: $rte-big-drop-btn-padding-right;
41
+ }
42
+
43
+ .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:hover,
44
+ .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:focus,
45
+ .e-toolbar-item .e-tbar-btn.e-btn.e-control.e-dropdown-btn:active {
46
+ padding-left: $rte-big-drop-btn-action-padding-left;
47
+ padding-right: $rte-big-drop-btn-action-padding-right;
48
+ }
49
+
50
+ .e-toolbar-item.e-active .e-tbar-btn.e-btn {
51
+ padding: $rte-big-active-tb-item-btn-padding;
52
+ }
53
+
54
+ .e-toolbar-item .e-rte-fontcolor-dropdown.e-active .e-rte-color-content,
55
+ .e-toolbar-item .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content {
56
+ line-height: $rte-big-split-btn-active-color-icon-line-height;
57
+ }
58
+ }
59
+
60
+ .e-dropdown-btn .e-caret {
61
+ font-size: $rte-big-dropdown-caret-icon-size;
62
+ }
63
+ }
64
+ }
65
+
66
+ .e-richtexteditor {
67
+ color: $rte-content-color;
68
+ display: block;
69
+ position: relative;
70
+
71
+ & textarea.e-content {
72
+ border: 0;
73
+ display: block;
74
+ height: 100%;
75
+ margin: 0;
76
+ outline: 0;
77
+ padding: 8px;
78
+ resize: none;
79
+ width: 100%;
80
+ }
81
+
82
+ & .e-rte-hidden {
83
+ border: 0;
84
+ display: block;
85
+ height: 0;
86
+ margin: 0;
87
+ outline: 0;
88
+ padding: 0;
89
+ resize: none;
90
+ visibility: hidden;
91
+ width: 0;
92
+ }
93
+
94
+ &.e-disabled {
95
+ pointer-events: none;
96
+ }
97
+
98
+ &.e-rte-full-screen {
99
+ bottom: 0;
100
+ height: 100% !important; // sass-lint:disable-line no-important
101
+ left: 0;
102
+ position: fixed;
103
+ right: 0;
104
+ top: 0;
105
+ width: 100% !important; // sass-lint:disable-line no-important
106
+ z-index: 999;
107
+ }
108
+
109
+ &.e-rtl .e-rte-character-count {
110
+ left: 0;
111
+ padding-left: 30px;
112
+ padding-right: unset;
113
+ right: unset;
114
+ }
115
+
116
+ .e-rte-toolbar {
117
+
118
+ .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
119
+ margin-left: $rte-tb-items-margin-left;
120
+ }
121
+
122
+ .e-hor-nav.e-expended-nav {
123
+ height: auto;
124
+ }
125
+ }
126
+
127
+ &.e-rtl .e-rte-toolbar .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:first-child {
128
+ margin-left: 0;
129
+ margin-right: $rte-tb-items-margin-left;
130
+ }
131
+
132
+ .e-rte-toolbar.e-rte-tb-mobile .e-toolbar-multirow {
133
+ margin-left: 0;
134
+ margin-right: 0;
135
+ overflow-x: auto;
136
+ white-space: nowrap;
137
+ width: 100%;
138
+ }
139
+
140
+ .e-rte-toolbar,
141
+ .e-rte-toolbar.e-toolbar.e-extended-toolbar {
142
+ position: inherit;
143
+ z-index: 101;
144
+
145
+ .e-toolbar-extended {
146
+ margin-left: 0;
147
+ padding-left: $rte-tb-items-padding-left;
148
+ }
149
+
150
+ .e-toolbar-items,
151
+ .e-toolbar-extended {
152
+
153
+ .e-toolbar-item {
154
+
155
+ .e-formats-tbar-btn > :first-child {
156
+ min-width: $rte-format-btn-min-width;
157
+ }
158
+
159
+ .e-font-name-tbar-btn > :first-child {
160
+ min-width: $rte-font-name-btn-min-width;
161
+ }
162
+
163
+ .e-font-size-tbar-btn > :first-child {
164
+ min-width: $rte-font-size-btn-min-width;
165
+ }
166
+
167
+ .e-dropdown-btn {
168
+ padding-left: $rte-drop-btn-padding-left;
169
+ padding-right: $rte-drop-btn-padding-right;
170
+
171
+ .e-rte-dropdown-btn-text {
172
+ font-weight: 500;
173
+ overflow: hidden;
174
+ text-overflow: ellipsis;
175
+ white-space: nowrap;
176
+ }
177
+ }
178
+
179
+ .e-dropdown-btn:hover,
180
+ .e-dropdown-btn:focus,
181
+ .e-dropdown-btn:active {
182
+ padding-left: $rte-drop-btn-action-padding-left;
183
+ padding-right: $rte-drop-btn-action-padding-right;
184
+ }
185
+
186
+ .e-font-color .e-selected-color.e-icons::before {
187
+
188
+ font-size: 12px;
189
+ position: relative;
190
+ top: -18px;
191
+ }
192
+
193
+ .e-font-color.e-icons::before {
194
+ font-size: 13px;
195
+ }
196
+
197
+ .e-background-color.e-icons::before {
198
+ display: inline;
199
+ font-size: 14px;
200
+ }
201
+
202
+ .e-rte-fontcolor-dropdown.e-active .e-rte-color-content,
203
+ .e-rte-backgroundcolor-dropdown.e-active .e-rte-color-content {
204
+ line-height: $rte-split-btn-active-color-icon-line-height;
205
+ }
206
+
207
+ .e-tbar-btn {
208
+
209
+ .e-icons.e-btn-icon:not(.e-caret) {
210
+ font-size: 16px;
211
+ }
212
+ }
213
+
214
+ &.e-active .e-tbar-btn.e-btn {
215
+ padding: $rte-active-tb-item-btn-padding;
216
+ }
217
+ }
218
+ }
219
+
220
+ &.e-control[class*='e-toolbar'] {
221
+ box-sizing: border-box;
222
+ }
223
+
224
+ .e-toolbar-extended.e-visible {
225
+ display: block;
226
+ visibility: hidden;
227
+ }
228
+
229
+ &.e-tbar-ios-fixed.e-rte-tb-fixed {
230
+ top: 0;
231
+ transform: translate3d(0, 0, 0);
232
+ }
233
+
234
+ &.e-rte-tb-fixed:not(.e-tbar-ios-fixed) {
235
+ bottom: 0;
236
+ }
237
+
238
+ &.e-rte-tb-fixed {
239
+ display: none;
240
+ left: 0;
241
+ position: fixed;
242
+ right: 0;
243
+
244
+ &.e-show {
245
+ display: block;
246
+ z-index: 101;
247
+ }
248
+ }
249
+
250
+ &.e-rte-tb-float {
251
+ position: fixed;
252
+ top: 0;
253
+
254
+ &.e-rte-tb-abs-float {
255
+ position: absolute;
256
+ }
257
+ }
258
+
259
+ .e-dropdown-btn .e-caret {
260
+ font-size: $rte-dropdown-caret-icon-size;
261
+ }
262
+ }
263
+
264
+ .rte-placeholder {
265
+ color: $rte-content-font-color;
266
+ line-height: $rte-placeholder-line-height;
267
+ opacity: 00.54;
268
+ overflow: hidden;
269
+ position: absolute;
270
+ text-align: start;
271
+ top: 0;
272
+ z-index: 1;
273
+ }
274
+
275
+ .e-rte-content {
276
+ position: relative;
277
+ z-index: 1;
278
+ }
279
+
280
+ .e-rte-content,
281
+ .e-source-content {
282
+ // sass-lint:disable no-vendor-prefixes
283
+ -webkit-overflow-scrolling: touch; //iOS devices scrolling smooth
284
+ // sass-lint:enabled no-vendor-prefixes
285
+ overflow: auto;
286
+ transition: 100ms ease-out;
287
+ width: 100%;
288
+
289
+ .e-content {
290
+ background: unset;
291
+ box-sizing: border-box;
292
+ height: 100%;
293
+ min-height: 100px;
294
+ outline: 0 solid transparent;
295
+ overflow-x: auto;
296
+ padding: 16px;
297
+ position: relative;
298
+ text-align: inherit;
299
+ z-index: 2;
300
+
301
+ @media screen and (min-width: 992px) {
302
+ font-size: $rte-content-font-size;
303
+ }
304
+ }
305
+
306
+ .e-content p {
307
+ margin: 0 0 10px;
308
+ margin-bottom: 10px;
309
+ }
310
+
311
+ .e-content li {
312
+ margin-bottom: 10px;
313
+ }
314
+
315
+ .e-content h1 {
316
+ font-size: 2.17em;
317
+ font-weight: 400;
318
+ line-height: 1;
319
+ margin: 10px 0;
320
+ }
321
+
322
+ .e-content h2 {
323
+ font-size: 1.74em;
324
+ font-weight: 400;
325
+ margin: 10px 0;
326
+ }
327
+
328
+ .e-content h3 {
329
+ font-size: 1.31em;
330
+ font-weight: 400;
331
+ margin: 10px 0;
332
+ }
333
+
334
+ .e-content h4 {
335
+ font-size: 16px;
336
+ font-weight: 400;
337
+ line-height: 1.5;
338
+ margin: 0;
339
+ }
340
+
341
+ .e-content h5 {
342
+ font-size: 00.8em;
343
+ font-weight: 400;
344
+ margin: 0;
345
+ }
346
+
347
+ .e-content h6 {
348
+ font-size: 00.65em;
349
+ font-weight: 400;
350
+ margin: 0;
351
+ }
352
+
353
+ .e-content blockquote {
354
+ margin: 10px 0;
355
+ margin-left: 0;
356
+ padding-left: 5px;
357
+ }
358
+
359
+ .e-content pre {
360
+ background-color: inherit;
361
+ border: 0;
362
+ border-radius: 0;
363
+ color: $rte-content-color;
364
+ font-size: inherit;
365
+ line-height: inherit;
366
+ margin: 0 0 10px;
367
+ overflow: visible;
368
+ padding: 0;
369
+ white-space: pre-wrap;
370
+ word-break: inherit;
371
+ word-wrap: break-word;
372
+ }
373
+
374
+ .e-content strong,
375
+ .e-content b {
376
+ font-weight: 700;
377
+ }
378
+
379
+ .e-content a {
380
+ text-decoration: none;
381
+ user-select: auto;
382
+ }
383
+
384
+ .e-content a:hover {
385
+ text-decoration: underline;
386
+ }
387
+
388
+ .e-content p:last-child,
389
+ .e-content pre:last-child,
390
+ .e-content blockquote:last-child {
391
+ margin-bottom: 0;
392
+ }
393
+
394
+ .e-content h3+h4,
395
+ .e-content h4+h5,
396
+ .e-content h5+h6 {
397
+ margin-top: 00.6em;
398
+ }
399
+
400
+ .e-content ul:last-child {
401
+ margin-bottom: 0;
402
+ }
403
+
404
+ }
405
+
406
+ .e-rte-character-count {
407
+ bottom: 0;
408
+ color: $rte-default-character-count-color;
409
+ font-family: 'Times New Roman', Georgia, Serif;
410
+ font-size: 14px;
411
+ margin-right: 30px;
412
+ opacity: 00.54;
413
+ padding-bottom: 2px;
414
+ position: absolute;
415
+ right: 0;
416
+ z-index: 100;
417
+
418
+ &.e-warning {
419
+ color: $rte-warning-character-count-color;
420
+ opacity: unset;
421
+ }
422
+
423
+ &.e-error {
424
+ color: $rte-error-character-count-color;
425
+ opacity: unset;
426
+ }
427
+
428
+ }
429
+
430
+ .e-rte-srctextarea {
431
+ background-color: transparent;
432
+ border: 0;
433
+ color: $rte-content-color;
434
+ display: block;
435
+ height: 100%;
436
+ line-height: 22px;
437
+ min-height: 200px;
438
+ overflow: auto;
439
+ padding: 16px;
440
+ resize: none;
441
+ transition: 100ms ease-out;
442
+ width: 100%;
443
+ }
444
+
445
+ img::selection {
446
+ background: transparent;
447
+ color: transparent;
448
+ }
449
+
450
+ .e-resize-handle {
451
+ height: $rte-resize-handler-height;
452
+ position: absolute;
453
+ width: $rte-resize-handler-width;
454
+
455
+ &.e-south-east {
456
+ bottom: $rte-resize-handler-position;
457
+ cursor: nwse-resize;
458
+ right: $rte-resize-handler-position;
459
+ z-index: 100;
460
+ }
461
+ }
462
+
463
+ &.e-rte-tb-expand {
464
+ &.e-rte-fixed-tb-expand {
465
+ transition: none;
466
+ }
467
+ }
468
+ }
469
+
470
+ .e-rte-linkcontent .e-rte-label {
471
+ padding-top: $rte-insert-dialog-label-padding-top;
472
+ }
473
+
474
+ .e-rte-label label {
475
+ font-weight: normal;
476
+ }
477
+
478
+ .e-rte-linkcontent .e-rte-label:first-child {
479
+ padding-top: 0;
480
+ }
481
+
482
+ .e-bigger .e-rte-dropdown-popup {
483
+
484
+ ul {
485
+ min-width: 84px;
486
+ }
487
+ }
488
+
489
+ .e-rte-dropdown-popup {
490
+
491
+ &.e-rte-inline-dropdown {
492
+
493
+ @media screen and (max-width: 768px) {
494
+ ul {
495
+ padding: 7px 0;
496
+
497
+ li.e-item {
498
+ height: 34px;
499
+ line-height: 34px;
500
+ padding: 0 6.5px;
501
+ }
502
+
503
+ .e-item .e-menu-icon {
504
+ float: none;
505
+ }
506
+ }
507
+ }
508
+
509
+ &.e-rte-dropdown-icons.e-dropdown-popup {
510
+
511
+ @media screen and (max-width: 768px) {
512
+ max-height: 280px;
513
+
514
+ ul {
515
+ display: inline-flex;
516
+ }
517
+ }
518
+ }
519
+
520
+ }
521
+
522
+ ul {
523
+ min-width: 82px;
524
+
525
+ .e-item {
526
+
527
+ .e-menu-icon {
528
+ margin: 0 6px;
529
+ width: auto;
530
+ }
531
+
532
+ &.e-h1 {
533
+ font-size: 2em;
534
+ font-weight: bold;
535
+ height: 40px;
536
+ line-height: 40px;
537
+ }
538
+
539
+ &.e-h2 {
540
+ font-size: 1.5em;
541
+ font-weight: bold;
542
+ height: 40px;
543
+ line-height: 40px;
544
+ }
545
+
546
+ &.e-h3 {
547
+ font-size: 1.16em;
548
+ font-weight: bold;
549
+ }
550
+
551
+ &.e-h4 {
552
+ font-size: 1em;
553
+ font-weight: bold;
554
+ }
555
+
556
+ &.e-h5 {
557
+ font-size: .83em;
558
+ font-weight: bold;
559
+ }
560
+
561
+ &.e-h6 {
562
+ font-size: .7em;
563
+ font-weight: bold;
564
+ }
565
+
566
+ &.e-segoe-ui {
567
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
568
+ }
569
+
570
+ &.e-arial {
571
+ font-family: Arial, Helvetica, sans-serif;
572
+ }
573
+
574
+ &.e-courier-new {
575
+ font-family: Courier New, Courier, monospace;
576
+ }
577
+
578
+ &.e-georgia {
579
+ font-family: Georgia, 'Times New Roman', Times, serif;
580
+ }
581
+
582
+ &.e-helvetica-neue {
583
+ font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
584
+ }
585
+
586
+ &.e-impact {
587
+ font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
588
+ }
589
+
590
+ &.e-lucida-console {
591
+ font-family: Lucida Console, Monaco, monospace;
592
+ }
593
+
594
+ &.e-tahoma {
595
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
596
+ }
597
+
598
+ &.e-times-new-roman {
599
+ font-family: 'Times New Roman', Times, serif;
600
+ }
601
+
602
+ &.e-trebuchet-ms {
603
+ font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
604
+ }
605
+
606
+ &.e-verdana {
607
+ font-family: Verdana, Geneva, Tahoma, sans-serif;
608
+ }
609
+
610
+ &.e-roboto {
611
+ font-family: 'Roboto', 'Segoe UI', 'GeezaPro', 'DejaVu Serif', sans-serif;
612
+ }
613
+
614
+ }
615
+ }
616
+
617
+ &.e-rte-dropdown-icons {
618
+
619
+ ul {
620
+ min-width: auto;
621
+ }
622
+
623
+ @media screen and (max-width: 768px) {
624
+
625
+ ul {
626
+ min-width: 30px;
627
+ }
628
+ }
629
+ }
630
+ }
631
+
632
+ .e-rte-image.e-imgbreak {
633
+ border: 0;
634
+ cursor: pointer;
635
+ display: block;
636
+ float: none;
637
+ margin: 5px auto;
638
+ max-width: 100%;
639
+ position: relative;
640
+ }
641
+
642
+ .e-rte-image {
643
+ border: 0;
644
+ cursor: pointer;
645
+ display: block;
646
+ float: none;
647
+ margin: auto;
648
+ max-width: 100%;
649
+ position: relative;
650
+ }
651
+
652
+ .e-rte-image.e-imginline {
653
+ display: inline-block;
654
+ float: none;
655
+ margin-left: 5px;
656
+ margin-right: 5px;
657
+ max-width: calc(100% - (2 * 5px));
658
+ vertical-align: bottom;
659
+ }
660
+
661
+ .e-rte-image.e-imgcenter {
662
+ cursor: pointer;
663
+ display: block;
664
+ float: none;
665
+ margin: 5px auto;
666
+ max-width: 100%;
667
+ position: relative;
668
+ }
669
+
670
+ .e-rte-image.e-imgleft {
671
+ float: left;
672
+ margin: 0 auto;
673
+ margin-right: 5px;
674
+ text-align: left;
675
+ }
676
+
677
+ .e-rte-image.e-imgright {
678
+ float: right;
679
+ margin: 0 auto;
680
+ margin-left: 5px;
681
+ text-align: right;
682
+ }
683
+
684
+ .e-rte-img-popup .e-item {
685
+ height: 106px;
686
+ width: 300px;
687
+ }
688
+
689
+ .e-rte-img-caption {
690
+ display: inline-block;
691
+ margin: 5px auto;
692
+ max-width: 100%;
693
+ position: relative;
694
+ }
695
+
696
+ .e-rte-img-caption.e-caption-inline {
697
+ display: inline-block;
698
+ margin: 5px auto;
699
+ margin-left: 5px;
700
+ margin-right: 5px;
701
+ max-width: calc(100% - (2 * 5px));
702
+ position: relative;
703
+ text-align: center;
704
+ vertical-align: bottom;
705
+ }
706
+
707
+ .e-rte-img-caption.e-imgcenter {
708
+ display: block;
709
+ margin-left: auto;
710
+ margin-right: auto;
711
+ }
712
+
713
+ .e-rte-img-caption.e-imgright {
714
+ display: block;
715
+ margin-left: auto;
716
+ margin-right: 0;
717
+ }
718
+
719
+ .e-rte-img-caption.e-imgleft {
720
+ display: block;
721
+ margin-left: 0;
722
+ margin-right: auto;
723
+ }
724
+
725
+ .e-rte-img-caption .e-rte-image.e-imgright {
726
+ float: none;
727
+ margin-left: auto;
728
+ margin-right: 0;
729
+ }
730
+
731
+ .e-rte-img-caption .e-rte-image.e-imgleft {
732
+ float: none;
733
+ margin: 0;
734
+ }
735
+
736
+ .e-img-caption.e-rte-img-caption.e-imgbreak {
737
+ display: block;
738
+ }
739
+
740
+ .e-rte-table {
741
+ border-collapse: collapse;
742
+ empty-cells: show;
743
+ }
744
+
745
+ .e-rte-table td,
746
+ .e-rte-table th {
747
+ border: 1px solid $rte-table-border-color;
748
+ height: 20px;
749
+ min-width: 20px;
750
+ padding: 2px 5px;
751
+ vertical-align: middle;
752
+ }
753
+
754
+ .e-rte-table.e-dashed-border td,
755
+ .e-rte-table.e-dashed-border th {
756
+ border-style: dashed;
757
+ }
758
+
759
+ .e-rte-img-caption .e-img-inner {
760
+ box-sizing: border-box;
761
+ display: block;
762
+ font-size: 16px;
763
+ font-weight: initial;
764
+ margin: auto;
765
+ opacity: .9;
766
+ position: relative;
767
+ text-align: center;
768
+ width: 100%;
769
+ }
770
+
771
+ .e-rte-img-caption .e-img-wrap {
772
+ display: inline-block;
773
+ margin: auto;
774
+ padding: 0;
775
+ width: 100%;
776
+ }
777
+
778
+ .e-rte-img-dialog .e-rte-label {
779
+ padding-top: $rte-insert-dialog-label-padding-top;
780
+ }
781
+
782
+ .e-rte-img-dialog .e-rte-label:first-child {
783
+ padding-top: 0;
784
+ }
785
+
786
+ .e-rte-table-resize.e-row-resize,
787
+ .e-rte-table-resize.e-column-resize {
788
+ background-color: transparent;
789
+ background-repeat: repeat;
790
+ bottom: 0;
791
+ cursor: col-resize;
792
+ height: 1px;
793
+ overflow: visible;
794
+ position: absolute;
795
+ width: 1px;
796
+ }
797
+
798
+ .e-rte-table-resize.e-row-resize {
799
+ cursor: row-resize;
800
+ height: 1px;
801
+ }
802
+
803
+ .e-richtexteditor {
804
+ .e-linkheader {
805
+ font-family: $rte-font-family;
806
+ font-size: 15px;
807
+ opacity: .87;
808
+ padding-bottom: $rte-insert-dialog-label-padding-bottom;
809
+ padding-top: $rte-insert-dialog-label-padding-top;
810
+ }
811
+
812
+ .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-delete-btn.e-icons,
813
+ .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-file-abort-btn.e-icons {
814
+ margin-top: 0;
815
+ }
816
+
817
+ .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list {
818
+ border-bottom: 0 solid transparent;
819
+ min-height: initial;
820
+ }
821
+
822
+ .e-img-uploadwrap.e-droparea .e-upload .e-upload-files .e-upload-file-list .e-file-container {
823
+ margin-left: 0;
824
+ }
825
+
826
+ .e-img-uploadwrap.e-droparea .e-upload .e-upload-files {
827
+ border-top: 0 solid transparent;
828
+ }
829
+
830
+ .e-img-uploadwrap.e-droparea .e-file-select-wrap {
831
+ display: none;
832
+ }
833
+
834
+ .e-img-uploadwrap.e-droparea .e-upload {
835
+ border: 0 solid transparent;
836
+ float: none;
837
+ }
838
+
839
+ .e-dialog .e-img-uploadwrap.e-droparea .e-browsebtn {
840
+ display: block;
841
+ height: 36px;
842
+ margin: -50px auto;
843
+ padding: 0 18px;
844
+ }
845
+
846
+ .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea .e-browsebtn {
847
+ display: none;
848
+ }
849
+
850
+ .e-dialog .e-img-uploadwrap.e-droparea {
851
+ line-height: 10;
852
+ min-height: 50px;
853
+ position: relative;
854
+ }
855
+
856
+ .e-dialog .e-img-uploadwrap.e-droparea .e-rte-upload-text {
857
+ display: inline-block;
858
+ line-height: normal;
859
+ }
860
+
861
+ .e-dialog.e-device.e-dlg-modal .e-img-uploadwrap.e-droparea {
862
+ line-height: 4;
863
+ }
864
+
865
+ .e-rte-inline-dropdown ul {
866
+ max-height: 200px;
867
+ overflow-y: auto;
868
+ }
869
+
870
+ .e-rte-dropdown-popup.e-rte-dropdown-items ul {
871
+ max-height: 280px;
872
+ overflow-y: auto;
873
+ }
874
+
875
+ .e-bigger .e-rte-dropdown-popup.e-rte-dropdown-items ul {
876
+ max-height: 360px;
877
+ overflow-y: auto;
878
+ }
879
+
880
+ .e-rte-inline-dropdown.e-rte-backgroundcolor-dropdown,
881
+ .e-rte-inline-dropdown.e-rte-fontcolor-dropdown {
882
+ line-height: 0;
883
+ }
884
+
885
+ .e-rte-inline-dropdown .e-rte-color-content .e-rte-elements {
886
+ border-bottom-style: solid;
887
+ border-bottom-width: 3px;
888
+ line-height: $rte-font-icon-line-height;
889
+ padding-bottom: 1px;
890
+ }
891
+
892
+ .e-rte-table-popup.e-popup.e-popup-open {
893
+ border-radius: 0;
894
+ box-shadow: $rte-table-popup-box;
895
+ font-size: 14px;
896
+ font-weight: normal;
897
+ min-width: 120px;
898
+ overflow: hidden;
899
+ padding: 10px;
900
+ }
901
+
902
+ .e-rte-table-popup.e-popup-open .e-rte-tablecell {
903
+ border: $rte-table-span-border;
904
+ display: inline-block;
905
+ height: 14px;
906
+ margin: 1px;
907
+ overflow: hidden;
908
+ vertical-align: top;
909
+ width: 14px;
910
+ }
911
+
912
+ .e-rte-table-popup.e-popup-open .e-rte-table-row {
913
+ height: 16px;
914
+ }
915
+
916
+ .e-rte-table-popup.e-popup-open .e-insert-table-btn {
917
+ width: 100%;
918
+ }
919
+
920
+ .e-rte-edit-table .e-rte-field {
921
+ padding-top: $rte-insert-dialog-label-padding-top;
922
+ }
923
+
924
+ .e-rte-edit-table .e-rte-field:first-child {
925
+ padding-top: 0;
926
+ }
927
+
928
+ .e-rte-content .e-content table td.e-cell-select,
929
+ .e-rte-content .e-content table th.e-cell-select {
930
+ border: 1px double $rte-table-select-border-color;
931
+ height: 24.67px;
932
+ }
933
+
934
+ span.e-table-box {
935
+ cursor: nwse-resize;
936
+ display: block;
937
+ height: 10px;
938
+ position: absolute;
939
+ width: 10px;
940
+ }
941
+
942
+ span.e-table-box.e-rmob {
943
+ height: 14px;
944
+ width: 14px;
945
+ }
946
+
947
+ .e-upload .e-upload-files .e-upload-file-list .e-file-container {
948
+ margin-right: 50px;
949
+ }
950
+
951
+ .e-rte-upload-popup {
952
+ width: 250px;
953
+ }
954
+
955
+ .e-rte-dialog-upload .e-upload-files {
956
+ border-top: 0;
957
+ }
958
+
959
+ .e-rte-dialog-upload .e-upload-files .e-upload-file-list {
960
+ border-bottom: 0;
961
+ }
962
+
963
+ }
964
+
965
+ .e-rte-backgroundcolor-colorpicker,
966
+ .e-rte-fontcolor-colorpicker {
967
+ & .e-color-palette.e-container {
968
+ & .e-custom-palette .e-palette {
969
+ padding: 0;
970
+ }
971
+
972
+ & .e-switch-ctrl-btn {
973
+ padding: 5px;.e-bigger & {
974
+ padding: 5px;
975
+ }
976
+ }
977
+
978
+ }
979
+
980
+ }
981
+
982
+ .e-rte-quick-popup {
983
+ border-radius: 2px;
984
+ overflow: hidden;
985
+
986
+ .e-rte-quick-toolbar {
987
+ border-radius: 2px;
988
+ min-height: 42px;
989
+
990
+ .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
991
+ white-space: nowrap;
992
+ }
993
+
994
+ &.e-remove-white-space {
995
+
996
+ .e-toolbar-items:not(.e-tbar-pos).e-toolbar-multirow {
997
+ white-space: nowrap;
998
+ }
999
+ }
1000
+
1001
+ .e-toolbar-items:not(.e-tbar-pos) {
1002
+ border-radius: 2px;
1003
+ margin: 0 6px;
1004
+ min-height: 42px;
1005
+
1006
+ .e-toolbar-item.e-rte-horizontal-separator,
1007
+ .e-toolbar-item.e-separator.e-multirow-separator.e-rte-horizontal-separator {
1008
+ display: block;
1009
+ height: 1px;
1010
+ margin: 0;
1011
+ min-height: 1px;
1012
+ }
1013
+
1014
+ .e-toolbar-item {
1015
+ margin: 0 6px;
1016
+ min-height: 42px;
1017
+
1018
+ &:first-child,
1019
+ &:last-child {
1020
+ margin: 0 6px;
1021
+ }
1022
+
1023
+ .e-tbar-btn:not(.e-rte-dropdown-btn) {
1024
+ line-height: 20px;
1025
+ }
1026
+
1027
+ .e-tbar-btn:not(.e-rte-dropdown-btn) .e-icons {
1028
+ min-width: $rte-quick-item-icon-min-width;
1029
+ }
1030
+ }
1031
+
1032
+ .e-toolbar-item .e-btn,
1033
+ .e-toolbar-item .e-btn:hover {
1034
+ min-height: $rte-quick-item-btn-height;
1035
+ min-width: $rte-quick-item-btn-width;
1036
+ padding: $rte-quick-item-padding;
1037
+ }
1038
+ }
1039
+
1040
+ .e-tbar-btn {
1041
+
1042
+ .e-icons.e-btn-icon:not(.e-caret) {
1043
+ font-size: 16px;
1044
+ }
1045
+ }
1046
+
1047
+ .e-background-color.e-icons::before {
1048
+ display: inline;
1049
+ }
1050
+
1051
+ .e-rte-backgroundcolor-dropdown .e-btn-icon.e-caret {
1052
+ font-size: 10px;
1053
+ }
1054
+ }
1055
+
1056
+ .e-rte-dropdown-btn.e-tbar-btn {
1057
+ line-height: $rte-quick-drop-btn-line-height;
1058
+ margin: $rte-quick-drop-btn-margin;
1059
+ padding: $rte-quick-drop-btn-padding;
1060
+
1061
+ .e-rte-dropdown-btn-text {
1062
+ font-weight: 500;
1063
+ overflow: hidden;
1064
+ text-overflow: ellipsis;
1065
+ white-space: nowrap;
1066
+ }
1067
+
1068
+ .e-icons:not(.e-caret) {
1069
+ font-size: 14px;
1070
+ margin-left: -3px;
1071
+ }
1072
+
1073
+ .e-caret {
1074
+ font-size: $rte-quick-drop-btn-caret-font-size;
1075
+ width: 12px;
1076
+ }
1077
+ }
1078
+
1079
+ &.e-hide {
1080
+ display: block;
1081
+ visibility: hidden;
1082
+ }
1083
+
1084
+ }
1085
+
1086
+ .e-bigger .e-rte-quick-popup {
1087
+ .e-rte-quick-toolbar {
1088
+ min-height: 48px;
1089
+
1090
+ .e-toolbar-items:not(.e-tbar-pos) {
1091
+ margin: 0 6px;
1092
+ min-height: 48px;
1093
+
1094
+ .e-toolbar-item:not(.e-separator) {
1095
+ margin: 0 6px;
1096
+ min-height: 48px;
1097
+ min-width: 36px;
1098
+ padding: 0;
1099
+ }
1100
+
1101
+ .e-toolbar-item .e-tbar-btn:not(.e-rte-dropdown-btn) {
1102
+ line-height: $rte-big-quick-item-line-height;
1103
+ }
1104
+
1105
+ .e-toolbar-item .e-btn,
1106
+ .e-toolbar-item .e-btn:hover {
1107
+ min-height: $rte-big-quick-item-btn-height;
1108
+ min-width: $rte-big-quick-item-btn-width;
1109
+ padding: $rte-big-quick-item-padding;
1110
+ }
1111
+
1112
+ .e-toolbar-item:first-child,
1113
+ .e-toolbar-item:last-child {
1114
+ margin: 0 6px;
1115
+ }
1116
+
1117
+ .e-toolbar-item .e-tbar-btn.e-btn.e-control {
1118
+ height: $rte-big-quick-tbar-item-min-height;
1119
+ line-height: normal;
1120
+ margin: 0;
1121
+ min-height: $rte-big-quick-tbar-item-min-height;
1122
+ min-width: $rte-big-quick-tbar-item-min-width;
1123
+ }
1124
+
1125
+ .e-toolbar-item .e-tbar-btn .e-icons.e-btn-icon:not(.e-caret) {
1126
+ font-size: 18px;
1127
+ }
1128
+ }
1129
+ }
1130
+
1131
+ .e-rte-dropdown-btn.e-tbar-btn {
1132
+ line-height: $rte-big-quick-drop-btn-line-height;
1133
+ margin: $rte-big-quick-drop-btn-margin;
1134
+ padding: $rte-big-quick-drop-btn-padding;
1135
+
1136
+ .e-icons:not(.e-caret) {
1137
+ font-size: 16px;
1138
+ }
1139
+
1140
+ .e-caret {
1141
+ font-size: $rte-big-quick-drop-btn-caret-font-size;
1142
+ width: 20px;
1143
+ }
1144
+ }
1145
+ }
1146
+
1147
+ .e-bigger .e-richtexteditor,
1148
+ .e-richtexteditor.e-bigger,
1149
+ .e-richtexteditor {
1150
+
1151
+ & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
1152
+ & .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
1153
+ & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
1154
+ & .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
1155
+
1156
+ & .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
1157
+ & .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
1158
+ display: flex;
1159
+ padding-left: $rte-colorpicker-parent-padding;
1160
+ padding-right: $rte-colorpicker-parent-padding;
1161
+
1162
+ &:hover,
1163
+ &:active,
1164
+ &.e-active,
1165
+ &.e-active:hover {
1166
+ padding-left: $rte-colorpicker-parent-padding-hover;
1167
+ padding-right: $rte-colorpicker-parent-padding-hover;
1168
+ }
1169
+
1170
+ &.e-active:hover {
1171
+ padding-bottom: $rte-colorpicker-parent-padding-active-hover;
1172
+ padding-top: $rte-colorpicker-parent-padding-active-hover;
1173
+ }
1174
+
1175
+ & .e-rte-color-content {
1176
+ position: relative;
1177
+ vertical-align: middle;
1178
+ width: $rte-font-icon-width;
1179
+
1180
+ & .e-rte-elements {
1181
+ border-bottom-style: solid;
1182
+ border-bottom-width: 3px;
1183
+ line-height: $rte-font-icon-line-height;
1184
+ padding-bottom: 1px;
1185
+ }
1186
+ }
1187
+
1188
+ .e-rte-color-content::after {
1189
+ content: '';
1190
+ height: 100%;
1191
+ position: absolute;
1192
+ right: 0;
1193
+ width: $rte-split-btn-bar-size;
1194
+ }
1195
+
1196
+ & .e-icons.e-btn-icon {
1197
+ display: flex;
1198
+ flex-direction: column;
1199
+ justify-content: center;
1200
+ line-height: 1;
1201
+ min-width: $rte-font-arrow-width;
1202
+ text-align: center;
1203
+ width: $rte-font-arrow-width;
1204
+ }
1205
+ }
1206
+ }
1207
+ }
1208
+
1209
+ .e-bigger .e-richtexteditor,
1210
+ .e-richtexteditor.e-bigger {
1211
+ & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-items .e-toolbar-item,
1212
+ & .e-rte-toolbar.e-toolbar .e-toolbar-items .e-toolbar-item,
1213
+ & .e-rte-toolbar.e-toolbar.e-extended-toolbar .e-toolbar-extended .e-toolbar-item,
1214
+ & .e-rte-toolbar.e-toolbar .e-toolbar-extended .e-toolbar-item {
1215
+ & .e-rte-fontcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control,
1216
+ & .e-rte-backgroundcolor-dropdown.e-dropdown-btn.e-tbar-btn.e-btn.e-control {
1217
+ & .e-icons.e-btn-icon {
1218
+ min-width: $rte-font-arrow-touch-width;
1219
+ width: $rte-font-arrow-touch-width;
1220
+ }
1221
+ }
1222
+ }
1223
+ }
1224
+
1225
+ .e-popup-modal.e-popup.e-popup-open {
1226
+ display: inline-flex;
1227
+ }
1228
+
1229
+ .e-rte-modal-popup.e-popup-container.e-center {
1230
+ justify-content: center;
1231
+ }
1232
+
1233
+ .e-rte-modal-popup.e-popup-container {
1234
+ align-items: center;
1235
+ display: none;
1236
+ height: 100%;
1237
+ left: 0;
1238
+ position: fixed;
1239
+ top: 0;
1240
+ width: 100%;
1241
+ z-index: 10000;
1242
+ }
1243
+
1244
+ .e-popup-overlay {
1245
+ height: 100%;
1246
+ left: 0;
1247
+ opacity: .5;
1248
+ position: absolute;
1249
+ top: 0;
1250
+ width: 100%;
1251
+ }
1252
+
1253
+ .e-bigger .e-rte-table-popup.e-popup-open .e-rte-tablecell {
1254
+ height: 16px;
1255
+ width: 16px;
1256
+ }
1257
+
1258
+ .e-bigger .e-rte-table-popup.e-popup-open .e-rte-table-row {
1259
+ height: 18px;
1260
+ }
1261
+
1262
+ .e-table-rhelper {
1263
+ cursor: col-resize;
1264
+ opacity: .87;
1265
+ position: absolute;
1266
+ }
1267
+
1268
+ .e-table-rhelper.e-column-helper {
1269
+ width: 1px;
1270
+ }
1271
+
1272
+ .e-table-rhelper.e-row-helper {
1273
+ height: 1px;
1274
+ }
1275
+
1276
+ .e-reicon::before {
1277
+ border-bottom: 6px solid transparent;
1278
+ border-right: 6px solid;
1279
+ border-top: 6px solid transparent;
1280
+ content: '';
1281
+ display: block;
1282
+ height: 0;
1283
+ position: absolute;
1284
+ right: 4px;
1285
+ top: 4px;
1286
+ width: 20px;
1287
+ }
1288
+
1289
+ .e-reicon::after {
1290
+ border-bottom: 6px solid transparent;
1291
+ border-left: 6px solid;
1292
+ border-top: 6px solid transparent;
1293
+ content: '';
1294
+ display: block;
1295
+ height: 0;
1296
+ left: 4px;
1297
+ position: absolute;
1298
+ top: 4px;
1299
+ width: 20px;
1300
+ z-index: 3;
1301
+ }
1302
+
1303
+ .e-row-helper.e-reicon::after {
1304
+ top: 10px;
1305
+ transform: rotate(90deg);
1306
+ }
1307
+
1308
+ .e-row-helper.e-reicon::before {
1309
+ left: 4px;
1310
+ top: -20px;
1311
+ transform: rotate(90deg);
1312
+ }
1313
+
1314
+ .e-rte-overflow {
1315
+ overflow: hidden;
1316
+ }
1317
+
1318
+ .e-rte-dialog-minheight {
1319
+ min-height: 296px;
1320
+ }
1321
+
1322
+ .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
1323
+ background-size: 700px 190px;
1324
+ min-height: 190px;
1325
+ }
1326
+
1327
+ .e-bigger .e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor,
1328
+ .e-bigger.e-content-placeholder.e-richtexteditor.e-placeholder-richtexteditor {
1329
+ background-size: 700px 190px;
1330
+ min-height: 190px;
1331
+ }
1332
+
1333
+ .e-rte-table.e-rte-table-border {
1334
+ border: 1px solid $rte-table-border-color;
1335
+ border-collapse: separate;
1336
+ }
1337
+
1338
+ .e-rte-img-dialog.e-dialog.e-device.e-dlg-modal {
1339
+ .e-img-uploadwrap.e-droparea {
1340
+ line-height: 10;
1341
+ min-height: 50px;
1342
+ position: relative;
1343
+
1344
+ .e-browsebtn {
1345
+ display: block;
1346
+ height: 36px;
1347
+ margin: -50px auto;
1348
+ padding: 0 18px;
1349
+ }
1350
+
1351
+ .e-upload {
1352
+ border: 0 solid transparent;
1353
+ float: none;
1354
+ }
1355
+
1356
+ .e-file-select-wrap {
1357
+ display: none;
1358
+ }
1359
+ }
1360
+
1361
+ .e-linkheader {
1362
+ font-family: $rte-font-family;
1363
+ font-size: 15px;
1364
+ opacity: .87;
1365
+ padding-bottom: $rte-insert-dialog-label-padding-bottom;
1366
+ padding-top: $rte-insert-dialog-label-padding-top;
1367
+ }
1368
+ }
1369
+
1370
+ .e-rte-file-manager-dialog {
1371
+
1372
+ .e-rte-label {
1373
+ padding-bottom: 8px;
1374
+ padding-top: 15px;
1375
+
1376
+ label {
1377
+ font-size: 15px;
1378
+ opacity: .87;
1379
+ }
1380
+ }
1381
+ }
1382
+
1383
+ // Blazor styles start
1384
+ .e-rte-upload-popup.e-dialog .e-file-select-wrap {
1385
+ display: none;
1386
+ }
1387
+
1388
+ .e-rte-upload-popup.e-dialog .e-dlg-content {
1389
+ overflow: hidden;
1390
+ padding: 0;
1391
+ }
1392
+
1393
+ .e-hide.e-rte-quick-popup-hide {
1394
+ border: 0;
1395
+ height: 0;
1396
+ position: absolute;
1397
+ width: 0;
1398
+ }
1399
+
1400
+ .e-rte-popup-hide {
1401
+ display: none;
1402
+ }
1403
+
1404
+ .e-rte-hide-visible {
1405
+ visibility: hidden;
1406
+ }
1407
+
1408
+ .e-rte-table-popup.e-dialog .e-dlg-content {
1409
+ padding: 0;
1410
+ }
1411
+
1412
+ .e-richtexteditor .e-rte-table-popup.e-popup-open.e-dialog .e-rte-tablecell {
1413
+ margin: 0;
1414
+ }
1415
+ // Blazor styles end
1416
+ }