@syncfusion/ej2-angular-ribbon 21.1.37 → 21.2.3-ngcc

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 (127) hide show
  1. package/@syncfusion/ej2-angular-ribbon.es5.js +566 -0
  2. package/@syncfusion/ej2-angular-ribbon.es5.js.map +1 -0
  3. package/@syncfusion/ej2-angular-ribbon.js +526 -0
  4. package/@syncfusion/ej2-angular-ribbon.js.map +1 -0
  5. package/CHANGELOG.md +21 -0
  6. package/dist/ej2-angular-ribbon.umd.js +710 -0
  7. package/dist/ej2-angular-ribbon.umd.js.map +1 -0
  8. package/dist/ej2-angular-ribbon.umd.min.js +11 -0
  9. package/dist/ej2-angular-ribbon.umd.min.js.map +1 -0
  10. package/ej2-angular-ribbon.d.ts +5 -0
  11. package/ej2-angular-ribbon.metadata.json +1 -0
  12. package/package.json +15 -29
  13. package/postinstall/tagchange.js +18 -0
  14. package/schematics/collection.json +10 -0
  15. package/schematics/ng-add/index.d.ts +3 -0
  16. package/schematics/ng-add/index.js +9 -0
  17. package/schematics/ng-add/index.ts +10 -0
  18. package/schematics/ng-add/schema.d.ts +13 -0
  19. package/schematics/ng-add/schema.js +2 -0
  20. package/schematics/ng-add/schema.json +34 -0
  21. package/schematics/ng-add/schema.ts +30 -0
  22. package/schematics/tsconfig.json +25 -0
  23. package/schematics/utils/lib-details.d.ts +4 -0
  24. package/schematics/utils/lib-details.js +6 -0
  25. package/schematics/utils/lib-details.ts +4 -0
  26. package/src/ribbon/collections.directive.d.ts +0 -5
  27. package/src/ribbon/groups.directive.d.ts +0 -5
  28. package/src/ribbon/items.directive.d.ts +0 -5
  29. package/src/ribbon/ribbon-all.module.d.ts +0 -6
  30. package/src/ribbon/ribbon.component.d.ts +0 -3
  31. package/src/ribbon/ribbon.module.d.ts +0 -10
  32. package/src/ribbon/tabs.directive.d.ts +0 -5
  33. package/styles/bootstrap-dark.css +47 -12
  34. package/styles/bootstrap.css +47 -12
  35. package/styles/bootstrap4.css +47 -12
  36. package/styles/bootstrap5-dark.css +47 -12
  37. package/styles/bootstrap5.css +47 -12
  38. package/styles/fabric-dark.css +47 -12
  39. package/styles/fabric.css +47 -12
  40. package/styles/fluent-dark.css +47 -12
  41. package/styles/fluent.css +47 -12
  42. package/styles/highcontrast-light.css +47 -12
  43. package/styles/highcontrast.css +47 -12
  44. package/styles/material-dark.css +47 -12
  45. package/styles/material.css +47 -12
  46. package/styles/ribbon/bootstrap-dark.css +47 -12
  47. package/styles/ribbon/bootstrap-dark.scss +1 -17
  48. package/styles/ribbon/bootstrap.css +47 -12
  49. package/styles/ribbon/bootstrap.scss +1 -17
  50. package/styles/ribbon/bootstrap4.css +47 -12
  51. package/styles/ribbon/bootstrap4.scss +1 -17
  52. package/styles/ribbon/bootstrap5-dark.css +47 -12
  53. package/styles/ribbon/bootstrap5-dark.scss +1 -17
  54. package/styles/ribbon/bootstrap5.css +47 -12
  55. package/styles/ribbon/bootstrap5.scss +1 -17
  56. package/styles/ribbon/fabric-dark.css +47 -12
  57. package/styles/ribbon/fabric-dark.scss +1 -17
  58. package/styles/ribbon/fabric.css +47 -12
  59. package/styles/ribbon/fabric.scss +1 -17
  60. package/styles/ribbon/fluent-dark.css +47 -12
  61. package/styles/ribbon/fluent-dark.scss +1 -17
  62. package/styles/ribbon/fluent.css +47 -12
  63. package/styles/ribbon/fluent.scss +1 -17
  64. package/styles/ribbon/highcontrast-light.css +47 -12
  65. package/styles/ribbon/highcontrast-light.scss +1 -16
  66. package/styles/ribbon/highcontrast.css +47 -12
  67. package/styles/ribbon/highcontrast.scss +1 -17
  68. package/styles/ribbon/material-dark.css +47 -12
  69. package/styles/ribbon/material-dark.scss +1 -17
  70. package/styles/ribbon/material.css +47 -12
  71. package/styles/ribbon/material.scss +1 -17
  72. package/styles/ribbon/tailwind-dark.css +47 -12
  73. package/styles/ribbon/tailwind-dark.scss +1 -17
  74. package/styles/ribbon/tailwind.css +47 -12
  75. package/styles/ribbon/tailwind.scss +1 -17
  76. package/styles/tailwind-dark.css +47 -12
  77. package/styles/tailwind.css +47 -12
  78. package/esm2020/public_api.mjs +0 -3
  79. package/esm2020/src/index.mjs +0 -9
  80. package/esm2020/src/ribbon/collections.directive.mjs +0 -70
  81. package/esm2020/src/ribbon/groups.directive.mjs +0 -66
  82. package/esm2020/src/ribbon/items.directive.mjs +0 -78
  83. package/esm2020/src/ribbon/ribbon-all.module.mjs +0 -47
  84. package/esm2020/src/ribbon/ribbon.component.mjs +0 -120
  85. package/esm2020/src/ribbon/ribbon.module.mjs +0 -61
  86. package/esm2020/src/ribbon/tabs.directive.mjs +0 -62
  87. package/esm2020/syncfusion-ej2-angular-ribbon.mjs +0 -5
  88. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs +0 -482
  89. package/fesm2015/syncfusion-ej2-angular-ribbon.mjs.map +0 -1
  90. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs +0 -482
  91. package/fesm2020/syncfusion-ej2-angular-ribbon.mjs.map +0 -1
  92. package/styles/ribbon/_all.scss +0 -2
  93. package/styles/ribbon/_bootstrap-dark-definition.scss +0 -206
  94. package/styles/ribbon/_bootstrap-definition.scss +0 -206
  95. package/styles/ribbon/_bootstrap4-definition.scss +0 -206
  96. package/styles/ribbon/_bootstrap5-dark-definition.scss +0 -1
  97. package/styles/ribbon/_bootstrap5-definition.scss +0 -206
  98. package/styles/ribbon/_fabric-dark-definition.scss +0 -206
  99. package/styles/ribbon/_fabric-definition.scss +0 -206
  100. package/styles/ribbon/_fluent-dark-definition.scss +0 -1
  101. package/styles/ribbon/_fluent-definition.scss +0 -206
  102. package/styles/ribbon/_fusionnew-definition.scss +0 -206
  103. package/styles/ribbon/_highcontrast-definition.scss +0 -206
  104. package/styles/ribbon/_highcontrast-light-definition.scss +0 -206
  105. package/styles/ribbon/_layout.scss +0 -1040
  106. package/styles/ribbon/_material-dark-definition.scss +0 -206
  107. package/styles/ribbon/_material-definition.scss +0 -206
  108. package/styles/ribbon/_tailwind-dark-definition.scss +0 -1
  109. package/styles/ribbon/_tailwind-definition.scss +0 -206
  110. package/styles/ribbon/_theme.scss +0 -343
  111. package/styles/ribbon/icons/_bootstrap-dark.scss +0 -9
  112. package/styles/ribbon/icons/_bootstrap.scss +0 -9
  113. package/styles/ribbon/icons/_bootstrap4.scss +0 -9
  114. package/styles/ribbon/icons/_bootstrap5-dark.scss +0 -1
  115. package/styles/ribbon/icons/_bootstrap5.scss +0 -9
  116. package/styles/ribbon/icons/_fabric-dark.scss +0 -9
  117. package/styles/ribbon/icons/_fabric.scss +0 -9
  118. package/styles/ribbon/icons/_fluent-dark.scss +0 -1
  119. package/styles/ribbon/icons/_fluent.scss +0 -9
  120. package/styles/ribbon/icons/_fusionnew.scss +0 -9
  121. package/styles/ribbon/icons/_highcontrast.scss +0 -9
  122. package/styles/ribbon/icons/_material-dark.scss +0 -9
  123. package/styles/ribbon/icons/_material.scss +0 -9
  124. package/styles/ribbon/icons/_material3.scss +0 -9
  125. package/styles/ribbon/icons/_tailwind-dark.scss +0 -9
  126. package/styles/ribbon/icons/_tailwind.scss +0 -9
  127. package/syncfusion-ej2-angular-ribbon.d.ts +0 -5
@@ -1,1040 +0,0 @@
1
- @include export-module('ribbon-layout') {
2
- .e-ribbon.e-rbn {
3
- display: block;
4
-
5
- .e-ribbon-tab {
6
- .e-toolbar {
7
- min-height: auto;
8
- display: inline-block;
9
- }
10
-
11
- .e-hscroll-content > .e-item:not(.e-active) {
12
- display: none;
13
- }
14
-
15
- .e-item {
16
- width: fit-content;
17
- }
18
-
19
- .e-ribbon-file-menu {
20
- position: absolute;
21
- line-height: $ribbon-file-menu-height;
22
- padding: $ribbon-file-menu-padding;
23
- border: $ribbon-file-menu-border;
24
- border-width: $ribbon-file-menu-border-width;
25
- font-size: $ribbon-file-menu-size;
26
- font-weight: $ribbon-file-menu-weight;
27
-
28
- &.e-active {
29
- border-radius: $ribbon-file-menu-border-radius;
30
- }
31
-
32
- &.e-active,
33
- &:focus {
34
- box-shadow: none;
35
- outline: none;
36
- }
37
- }
38
-
39
- .e-ribbon-help-template {
40
- position: absolute;
41
- top: 0;
42
- display: flex;
43
- align-items: center;
44
- height: $ribbon-help-template-height;
45
- padding-right: $ribbon-help-template-padding;
46
- border-bottom: $ribbon-help-template-border;
47
- }
48
-
49
- .e-tab-header {
50
- border-bottom: $ribbon-tab-border;
51
-
52
- .e-hor-nav {
53
- height: $ribbon-horizontal-nav-height;
54
- min-height: $ribbon-horizontal-nav-height;
55
- }
56
-
57
- &::before {
58
- border-width: 0;
59
- }
60
-
61
- .e-indicator {
62
- display: block;
63
- z-index: 1;
64
- }
65
-
66
- .e-toolbar-items {
67
- min-height: auto;
68
- height: $ribbon-toolbar-items-height;
69
-
70
- &:not(.e-tbar-pos) {
71
-
72
- .e-toolbar-item:first-child,
73
- .e-toolbar-item:last-child {
74
- margin: 0;
75
- }
76
- }
77
- }
78
-
79
- .e-toolbar-item {
80
- vertical-align: unset;
81
- margin: 0;
82
- border: none;
83
-
84
- &.e-active {
85
- border: none;
86
-
87
- &::before {
88
- display: none;
89
- }
90
- }
91
-
92
- .e-tab-wrap {
93
- padding: 0;
94
- height: auto;
95
- border: none;
96
- }
97
-
98
- .e-tab-text {
99
- padding: $ribbon-tab-text-padding;
100
- line-height: $ribbon-tab-text-height;
101
- text-transform: none;
102
- margin: 0;
103
- font-size: $ribbon-tab-text-size;
104
- font-weight: $ribbon-tab-text-weight;
105
- }
106
-
107
- .e-text-wrap {
108
- height: auto;
109
- }
110
-
111
- &.e-active .e-text-wrap {
112
- &::before {
113
- display: none;
114
- }
115
- }
116
- }
117
-
118
- .e-toolbar-item:not(.e-separator) {
119
- height: auto;
120
- min-height: auto;
121
- }
122
- }
123
-
124
- .e-hscroll {
125
- padding: $ribbon-hscroll-padding;
126
-
127
- .e-scroll-nav {
128
- height: auto;
129
- min-height: auto;
130
- min-width: auto;
131
- width: auto;
132
- border-style: solid;
133
- border-width: $ribbon-hscroll-nav-border-width;
134
- border-radius: $ribbon-hscroll-nav-border-radius;
135
- z-index: 3;
136
-
137
- &.e-overlay {
138
- display: none;
139
- }
140
-
141
- .e-nav-arrow {
142
- font-size: $ribbon-nav-arrow-size;
143
- height: auto;
144
- line-height: $ribbon-nav-arrow-height;
145
- padding: $ribbon-hscroll-nav-arrow-padding;
146
- width: auto;
147
- letter-spacing: unset;
148
- font-weight: $ribbon-hscroll-nav-arrow-weight;
149
- }
150
-
151
- .e-nav-arrow::before {
152
- font-size: $ribbon-nav-arrow-size;
153
- line-height: $ribbon-nav-arrow-height;
154
- }
155
- }
156
- }
157
-
158
- &.e-focused .e-tab-header {
159
- .e-toolbar-item .e-tab-wrap:focus .e-text-wrap {
160
- height: $ribbon-toolbar-items-height;
161
- }
162
- }
163
- }
164
-
165
- .e-content {
166
- width: calc(100% - $ribbon-collapsible-content-width);
167
- }
168
-
169
- .e-ribbon-collapse-btn {
170
- bottom: 0;
171
- cursor: pointer;
172
- position: absolute;
173
- line-height: $ribbon-collapse-btn-height;
174
- padding: $ribbon-collapse-btn-padding;
175
- border: $ribbon-items-border;
176
- }
177
-
178
- .e-ribbon-collapse-btn:not(.e-ribbon-expand-btn) {
179
- transform: rotate(180deg);
180
- }
181
-
182
- &.e-ribbon-overflow {
183
- .e-content {
184
- width: calc(100% - $ribbon-collapsible-content-width - $ribbon-overflow-btn-content-width);
185
- }
186
-
187
- .e-ribbon-group-of-btn,
188
- .e-ribbon-overall-of-btn {
189
- cursor: pointer;
190
- border-radius: $ribbon-overflow-btn-border-radius;
191
- padding: $ribbon-overflow-btn-padding;
192
- border: $ribbon-items-border;
193
- height: $ribbon-overflow-btn-height;
194
- margin: auto;
195
-
196
- .e-btn-icon {
197
- font-size: 16px;
198
- line-height: 16px;
199
- padding: $ribbon-overflow-btn-icon-padding;
200
- margin: $ribbon-overflow-btn-margin;
201
- width: auto;
202
- }
203
-
204
- &:focus {
205
- outline: none;
206
- }
207
- }
208
-
209
- .e-ribbon-overall-of-btn {
210
- bottom: $ribbon-overall-overflow-btn-position;
211
- position: absolute;
212
- }
213
-
214
- .e-ribbon-group-container {
215
- display: inline-flex;
216
- }
217
-
218
- .e-ribbon-overall-of-btn.e-ribbon-hide {
219
- display: none;
220
- }
221
- }
222
-
223
- &.e-ribbon-minimize .e-ribbon-tab .e-content,
224
- &.e-ribbon-minimize .e-ribbon-collapse-btn,
225
- &.e-ribbon-minimize .e-ribbon-overall-of-btn {
226
- display: none;
227
- }
228
-
229
- &.e-ribbon-simplified-mode {
230
-
231
- .e-ribbon-tab .e-hscroll-bar {
232
- overflow-y: hidden;
233
- }
234
-
235
- .e-ribbon-group {
236
- padding-top: $ribbon-simplified-group-padding;
237
- height: auto;
238
-
239
- &.e-ribbon-emptyCollection::after {
240
- display: none;
241
- }
242
-
243
- &.e-ribbon-emptyCollection {
244
- .e-ribbon-group-container {
245
- padding: 0;
246
- }
247
- }
248
- }
249
-
250
- .e-ribbon-launcher-icon {
251
- display: none;
252
- }
253
-
254
- .e-ribbon-group-container {
255
- padding: $ribbon-simplified-group-content-padding;
256
- }
257
-
258
- .e-ribbon-group-content {
259
- padding: 0;
260
- height: $ribbon-simplified-group-content-height;
261
- align-items: center;
262
- }
263
- }
264
-
265
- .e-ribbon-tab-item {
266
- display: inline-flex;
267
- }
268
-
269
- .e-ribbon-group {
270
- position: relative;
271
- padding-top: $ribbon-group-padding;
272
- height: $ribbon-group-height;
273
- }
274
-
275
- .e-ribbon-group::after {
276
- border-right: 1px solid;
277
- content: '';
278
- height: calc(100% - 16px);
279
- position: absolute;
280
- top: 8px;
281
- }
282
-
283
- &:not(.e-rtl) {
284
-
285
- .e-ribbon-collapse-btn,
286
- .e-ribbon-help-template,
287
- .e-ribbon-group::after {
288
- right: 0;
289
- }
290
-
291
- .e-ribbon-overall-of-btn {
292
- right: $ribbon-overflow-collapse-btn-right;
293
- }
294
-
295
- .e-tab-header {
296
- left: var(--fileMenuWidth);
297
- }
298
- }
299
-
300
- &.e-rtl {
301
-
302
- .e-ribbon-collapse-btn,
303
- .e-ribbon-help-template,
304
- .e-ribbon-group::after {
305
- left: 0;
306
- }
307
-
308
- .e-ribbon-overall-of-btn {
309
- left: $ribbon-overflow-collapse-btn-right;
310
- }
311
-
312
- .e-tab-header {
313
- right: var(--fileMenuWidth);
314
- }
315
- }
316
- }
317
-
318
- .e-ribbon.e-rbn,
319
- .e-ribbon-group-overflow-ddb {
320
- border: $ribbon-border;
321
-
322
- .e-input-group {
323
- height: $ribbon-input-group-height;
324
- border-radius: $ribbon-input-group-border-radius;
325
- margin-bottom: $ribbon-input-group-margin;
326
-
327
- input.e-input {
328
- padding: $ribbon-input-padding;
329
- font-size: $ribbon-input-size;
330
- line-height: $ribbon-input-height;
331
- font-weight: $ribbon-input-weight;
332
- height: auto;
333
- min-height: auto;
334
- }
335
-
336
- &.e-control-wrapper {
337
- .e-input-group-icon {
338
- font-size: $ribbon-input-icon-size;
339
- line-height: $ribbon-input-icon-height;
340
- height: auto;
341
- padding: $ribbon-input-icon-padding;
342
- margin: 0;
343
- font-weight: $ribbon-input-icon-weight;
344
- border: none;
345
- min-width: auto;
346
- min-height: auto;
347
- border-radius: unset;
348
-
349
- &.e-ddl-icon {
350
- font-size: $ribbon-input-icon-size;
351
- }
352
- }
353
-
354
- .e-clear-icon {
355
- min-width: auto;
356
- }
357
- }
358
-
359
- .e-clear-icon {
360
- min-width: auto;
361
- }
362
- }
363
-
364
- .e-ribbon-group-content {
365
- padding: $ribbon-group-content-padding;
366
- }
367
-
368
- .e-ribbon-content-height {
369
- height: $ribbon-group-content-height;
370
- }
371
-
372
- .e-ribbon-group-header {
373
- align-items: center;
374
- display: flex;
375
- justify-content: center;
376
- white-space: nowrap;
377
- padding: $ribbon-group-header-padding;
378
- line-height: $ribbon-group-header-height;
379
- font-size: $ribbon-group-header-font-size;
380
- }
381
-
382
- .e-ribbon-launcher-icon {
383
- position: absolute;
384
- bottom: 0;
385
- margin: $ribbon-launcher-icon-margin;
386
- cursor: pointer;
387
- border: $ribbon-items-border;
388
- }
389
-
390
- &:not(.e-rtl) .e-ribbon-launcher {
391
- .e-ribbon-group-header {
392
- margin-right: $ribbon-group-header-margin;
393
- }
394
-
395
- .e-ribbon-launcher-icon {
396
- right: 0;
397
- }
398
- }
399
-
400
- &.e-rtl .e-ribbon-launcher {
401
- .e-ribbon-group-header {
402
- margin-left: $ribbon-group-header-margin;
403
- }
404
-
405
- .e-ribbon-launcher-icon {
406
- left: 0;
407
- margin: $ribbon-rtl-launcher-icon-margin;
408
- }
409
- }
410
-
411
- .e-ribbon-column {
412
- display: inline-flex;
413
- flex-direction: row;
414
- }
415
-
416
- .e-ribbon-row {
417
- display: inline-flex;
418
- flex-direction: column;
419
- }
420
-
421
- .e-ribbon-group-overflow,
422
- .e-ribbon-item {
423
- display: flex;
424
- padding: 1px;
425
- vertical-align: middle;
426
-
427
- .e-btn {
428
- border: $ribbon-items-border;
429
- border-radius: $ribbon-items-border-radius;
430
- font-weight: $ribbon-items-font-weight;
431
- font-size: $ribbon-items-btn-size;
432
- text-transform: none;
433
-
434
- &:focus {
435
- outline: none;
436
- }
437
- }
438
-
439
- &.e-ribbon-large-item {
440
- .e-btn {
441
- max-width: $ribbon-large-items-max-width;
442
- min-height: inherit;
443
- min-width: fit-content;
444
- white-space: normal;
445
- padding: $ribbon-large-items-btn-padding;
446
- line-height: $ribbon-large-items-btn-height;
447
- height: 100%;
448
- display: flex;
449
- flex-direction: column;
450
- justify-content: flex-start;
451
- align-items: center;
452
-
453
- &.e-ribbon-group-overflow-ddb {
454
- max-width: 100%;
455
- }
456
-
457
- .e-btn-icon:not(.e-caret) {
458
- font-size: $ribbon-large-items-icon-size;
459
- font-weight: $ribbon-items-font-weight;
460
- padding: $ribbon-large-items-icon-padding;
461
- }
462
-
463
- .e-icon-top {
464
- height: 50%;
465
- }
466
- }
467
-
468
- & > .e-split-btn-wrapper.e-vertical .e-btn {
469
- justify-content: space-evenly;
470
- height: 50%;
471
- }
472
-
473
- .e-dropdown-btn {
474
- .e-caret {
475
- font-size: $ribbon-dropdown-caret-btn-size;
476
- padding: $ribbon-overflow-dropdown-btn-padding;
477
- line-height: $ribbon-dropdown-caret-btn-height;
478
- }
479
- }
480
- }
481
- }
482
-
483
- .e-ribbon-group-overflow {
484
- height: $ribbon-group-overflow-height;
485
- padding: $ribbon-group-overflow-padding;
486
- }
487
-
488
- .e-ribbon-item {
489
- min-height: 33%;
490
- padding: $ribbon-items-padding;
491
-
492
- .e-checkbox-wrapper {
493
- padding: $ribbon-items-checkbox-padding;
494
-
495
- .e-label {
496
- font-size: $ribbon-items-checkbox-size;
497
- }
498
- }
499
-
500
- .e-btn {
501
- box-shadow: none;
502
-
503
- &:disabled {
504
- pointer-events: none;
505
- }
506
- }
507
-
508
- .e-checkbox-wrapper {
509
- height: fit-content;
510
- margin: auto 0;
511
- width: max-content;
512
- }
513
-
514
- .e-colorpicker-wrapper {
515
- border: 1px solid transparent;
516
-
517
- .e-split-btn-wrapper.e-rtl .e-split-colorpicker {
518
- &.e-split-btn {
519
- padding: 0;
520
- }
521
- }
522
- }
523
-
524
- .e-split-btn-wrapper {
525
- border: 1px solid transparent;
526
- border-radius: $ribbon-items-border-radius;
527
-
528
- .e-btn {
529
- border-radius: 0;
530
- }
531
-
532
- .e-dropdown-btn .e-caret {
533
- font-size: $ribbon-dropdown-caret-btn-size;
534
- padding: $ribbon-dropdown-btn-padding;
535
- }
536
- }
537
-
538
- &.e-ribbon-large-item {
539
- min-height: 100%;
540
-
541
- .e-split-btn-wrapper.e-vertical {
542
- height: 100%;
543
-
544
- .e-dropdown-btn {
545
- margin: auto;
546
- }
547
- }
548
- }
549
-
550
- &.e-ribbon-small-item,
551
- &.e-ribbon-medium-item {
552
- .e-btn {
553
- white-space: nowrap;
554
- padding: $ribbon-items-btn-padding;
555
- line-height: $ribbon-items-height;
556
-
557
- .e-btn-icon {
558
- font-size: 16px;
559
- line-height: 16px;
560
- margin: $ribbon-items-margin;
561
- }
562
- }
563
-
564
- .e-colorpicker-wrapper .e-split-btn-wrapper {
565
- border: none;
566
- }
567
-
568
- .e-split-colorpicker.e-split-btn {
569
- .e-btn-icon {
570
- height: 16px;
571
- width: 16px;
572
- }
573
-
574
- .e-split-preview {
575
- border-radius: unset;
576
- }
577
- }
578
-
579
- .e-dropdown-btn .e-caret {
580
- font-size: $ribbon-dropdown-caret-btn-size;
581
- padding: $ribbon-dropdown-caret-btn-padding;
582
- line-height: $ribbon-dropdown-caret-btn-height;
583
- margin: 0;
584
- width: auto;
585
- }
586
-
587
- .e-split-btn-wrapper .e-btn {
588
- margin: 0;
589
- }
590
- }
591
-
592
- &.e-ribbon-medium-item {
593
- .e-btn {
594
- align-items: center;
595
- display: flex;
596
-
597
- .e-btn-icon.e-icon-left {
598
- width: auto;
599
- }
600
-
601
- &.e-dropdown-btn:not(.e-icon-btn) .e-caret {
602
- margin: $ribbon-items-margin;
603
- padding: 0;
604
- }
605
- }
606
- }
607
- }
608
-
609
- .e-ribbon-vertical-center:not(.e-ribbon-large-item) {
610
- margin-bottom: auto;
611
- margin-top: auto;
612
- }
613
-
614
- &:not(.e-rtl) .e-ribbon-item {
615
-
616
- &.e-ribbon-small-item,
617
- &.e-ribbon-medium-item {
618
- .e-btn {
619
- &:not(.e-icon-btn, .e-dropdown-btn) {
620
- padding: 0 4px 0 0;
621
- }
622
- }
623
- }
624
-
625
- &.e-ribbon-medium-item {
626
- .e-btn {
627
- .e-btn-icon.e-icon-left {
628
- padding: 0 2px 0 0;
629
- }
630
- }
631
- }
632
- }
633
-
634
- &.e-rtl .e-ribbon-item {
635
-
636
- &.e-ribbon-small-item,
637
- &.e-ribbon-medium-item {
638
- .e-btn {
639
- &:not(.e-icon-btn, .e-dropdown-btn) {
640
- padding: 0 0 0 4px;
641
- }
642
- }
643
- }
644
-
645
- &.e-ribbon-medium-item {
646
- .e-btn {
647
- .e-btn-icon.e-icon-left {
648
- padding: 0 0 0 2px;
649
- }
650
- }
651
- }
652
- }
653
- }
654
-
655
- .e-ribbon-group-overflow-ddb {
656
- .e-ribbon-of-tab:not(.e-ribbon-active) {
657
- display: none;
658
- }
659
-
660
- .e-ribbon-overflow-target {
661
-
662
- .e-ribbon-item > .e-input-group {
663
- margin: $ribbon-overflow-wrapper-item-margin;
664
- }
665
-
666
- .e-ribbon-item > .e-checkbox-wrapper {
667
- margin: $ribbon-items-margin;
668
- padding: 0;
669
- }
670
-
671
- .e-ribbon-item.e-ribbon-medium-item {
672
- padding: $ribbon-overflow-item-padding;
673
- width: 100%;
674
-
675
- > .e-split-btn-wrapper .e-btn,
676
- > .e-btn {
677
- line-height: $ribbon-overflow-item-btn-height;
678
- }
679
-
680
- >.e-split-btn-wrapper {
681
- width: inherit;
682
- }
683
-
684
- >.e-split-btn-wrapper .e-split-btn,
685
- >.e-btn {
686
- width: 100%;
687
- justify-content: flex-start;
688
- }
689
-
690
- >.e-split-btn-wrapper,
691
- >.e-dropdown-btn {
692
- .e-icons.e-caret {
693
- transform: rotate(-90deg);
694
- margin-left: auto;
695
- }
696
- }
697
- }
698
-
699
- .e-ribbon-overflow-header {
700
- padding: $ribbon-overflow-header-padding;
701
- font-weight: $ribbon-overflow-header-weight;
702
- line-height: $ribbon-overflow-header-height;
703
- }
704
- }
705
- }
706
-
707
- .e-rtl.e-ribbon-group-overflow-ddb {
708
- .e-ribbon-overflow-target .e-ribbon-item {
709
-
710
- >.e-split-btn-wrapper,
711
- >.e-dropdown-btn {
712
- .e-icons.e-caret {
713
- transform: rotate(90deg);
714
- margin-right: auto;
715
- margin-left: unset;
716
- }
717
- }
718
- }
719
- }
720
-
721
- .e-ribbon-menu {
722
- display: block;
723
-
724
- &.e-menu-wrapper ul.e-vertical,
725
- &.e-menu-wrapper ul.e-ul {
726
- &.e-menu {
727
- border: $ribbon-menu-border;
728
- border-radius: $ribbon-menu-border-radius;
729
- }
730
-
731
- .e-menu-item {
732
- border-radius: unset;
733
-
734
- .e-menu-icon {
735
- width: auto;
736
- }
737
-
738
- &.e-blankicon {
739
- padding-left: $ribbon-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
740
- }
741
- }
742
- }
743
- }
744
-
745
- .e-ribbon-tooltip {
746
- .e-tip-content {
747
- padding: 4px;
748
-
749
- .e-ribbon-tooltip-title {
750
- font-size: 12px;
751
- line-height: 18px;
752
- padding: 4px 4px 0;
753
- }
754
-
755
- .e-ribbon-text-container {
756
- padding: 4px;
757
- display: flex;
758
-
759
- .e-ribbon-tooltip-content {
760
- font-size: 10px;
761
- line-height: 15px;
762
- }
763
-
764
- .e-ribbon-tooltip-icon {
765
- font-size: 32px;
766
- line-height: 32px;
767
- padding-right: 8px;
768
- }
769
- }
770
- }
771
- }
772
-
773
- .e-bigger.e-ribbon.e-rbn,
774
- .e-bigger .e-ribbon.e-rbn {
775
-
776
- .e-ribbon-group {
777
- height: $ribbon-bigger-group-height;
778
- }
779
-
780
- .e-ribbon-tab {
781
- .e-ribbon-file-menu {
782
- line-height: $ribbon-bigger-file-menu-height;
783
- padding: $ribbon-bigger-file-menu-padding;
784
- font-size: $ribbon-bigger-file-menu-size;
785
- }
786
-
787
- .e-ribbon-help-template {
788
- padding-right: $ribbon-bigger-help-template-padding;
789
- height: $ribbon-bigger-help-template-height;
790
- }
791
-
792
- .e-hscroll {
793
- min-height: auto;
794
- }
795
-
796
- .e-tab-header {
797
- .e-hor-nav {
798
- height: $ribbon-bigger-horizontal-nav-height;
799
- min-height: $ribbon-bigger-horizontal-nav-height;
800
- }
801
-
802
- .e-toolbar-items {
803
- height: $ribbon-bigger-toolbar-items-height;
804
- }
805
-
806
- .e-toolbar-item {
807
- margin-right: 0;
808
-
809
- .e-tab-text {
810
- font-size: $ribbon-bigger-tab-text-size;
811
- padding: $ribbon-bigger-tab-text-padding;
812
- line-height: $ribbon-bigger-tab-text-height;
813
- }
814
- }
815
- }
816
-
817
- &.e-focused .e-tab-header {
818
- .e-toolbar-item .e-tab-wrap {
819
-
820
- &:focus,
821
- &:focus .e-text-wrap {
822
- height: $ribbon-bigger-toolbar-items-height;
823
- }
824
- }
825
- }
826
- }
827
-
828
- &.e-ribbon-collapsible {
829
- .e-content {
830
- width: calc(100% - $ribbon-bigger-collapsible-content-width);
831
- }
832
-
833
- .e-ribbon-collapse-btn {
834
- line-height: $ribbon-bigger-collapse-btn-height;
835
- font-size: $ribbon-bigger-collapse-btn-font-size;
836
- padding: $ribbon-bigger-collapse-btn-padding;
837
- }
838
-
839
- &.e-ribbon-overflow {
840
- .e-content {
841
- width: calc(100% - $ribbon-bigger-collapsible-content-width - $ribbon-bigger-overflow-btn-content-width);
842
- }
843
-
844
- .e-ribbon-group-of-btn,
845
- .e-ribbon-overall-of-btn {
846
- height: $ribbon-bigger-overall-overflow-btn-height;
847
-
848
- .e-btn-icon {
849
- font-size: $ribbon-bigger-overflow-btn-font-size;
850
- padding: $ribbon-bigger-overflow-btn-icon-padding;
851
- line-height: $ribbon-bigger-overflow-btn-height;
852
- }
853
- }
854
-
855
- .e-ribbon-overall-of-btn {
856
- bottom: $ribbon-bigger-overall-overflow-btn-position;
857
- }
858
-
859
- &:not(.e-rtl) .e-ribbon-overall-of-btn {
860
- right: $ribbon-bigger-overflow-collapse-btn-right;
861
- }
862
-
863
- &.e-rtl .e-ribbon-overall-of-btn {
864
- left: $ribbon-bigger-overflow-collapse-btn-right;
865
- }
866
- }
867
- }
868
- }
869
-
870
- .e-bigger.e-ribbon.e-rbn,
871
- .e-bigger .e-ribbon.e-rbn,
872
- .e-bigger .e-ribbon-group-overflow-ddb,
873
- .e-bigger.e-ribbon-group-overflow-ddb {
874
-
875
- .e-ribbon-group-header {
876
- padding: $ribbon-bigger-group-header-padding;
877
- line-height: $ribbon-bigger-group-header-height;
878
- font-size: $ribbon-bigger-group-header-font-size;
879
- }
880
-
881
- .e-ribbon-launcher-icon {
882
- margin: $ribbon-bigger-launcher-icon-margin;
883
- }
884
-
885
- &.e-rtl .e-ribbon-launcher-icon {
886
- margin: $ribbon-bigger-rtl-launcher-icon-margin;
887
- }
888
-
889
- &.e-ribbon-simplified-mode {
890
-
891
- .e-ribbon-group {
892
- height: auto;
893
- }
894
-
895
- .e-ribbon-group-content {
896
- height: $ribbon-bigger-simplified-group-content-height;
897
- }
898
- }
899
-
900
- .e-ribbon-content-height {
901
- height: $ribbon-bigger-content-height;
902
- }
903
-
904
- .e-ribbon-group-overflow {
905
- height: $ribbon-bigger-group-overflow-content-height;
906
- }
907
-
908
- .e-input-group {
909
- height: $ribbon-bigger-input-group-height;
910
- margin-bottom: $ribbon-bigger-input-group-margin;
911
-
912
- &:not(.e-float-input) .e-input {
913
- min-height: auto;
914
- }
915
-
916
- input.e-input {
917
- padding: $ribbon-bigger-input-padding;
918
- font-size: $ribbon-bigger-input-items-size;
919
- line-height: $ribbon-bigger-input-items-height;
920
- height: auto;
921
- }
922
-
923
- &.e-control-wrapper {
924
- .e-input-group-icon {
925
- font-size: $ribbon-bigger-input-items-btn-size;
926
- line-height: $ribbon-bigger-input-items-btn-height;
927
- padding: $ribbon-bigger-input-icon-padding;
928
-
929
- &.e-ddl-icon {
930
- font-size: $ribbon-bigger-input-items-btn-size;
931
- }
932
- }
933
- }
934
- }
935
-
936
- .e-ribbon-item {
937
- padding: $ribbon-bigger-items-padding;
938
-
939
- .e-checkbox-wrapper {
940
- padding: $ribbon-bigger-items-checkbox-padding;
941
-
942
- .e-label {
943
- font-size: $ribbon-bigger-items-checkbox-size;
944
- }
945
- }
946
- }
947
-
948
- .e-ribbon-group-overflow,
949
- .e-ribbon-item {
950
- &.e-ribbon-large-item {
951
- .e-btn {
952
- padding: $ribbon-bigger-large-items-btn-padding;
953
- font-size: $ribbon-bigger-large-items-btn-size;
954
- line-height: $ribbon-bigger-large-items-btn-height;
955
-
956
- .e-btn-icon:not(.e-caret) {
957
- font-size: $ribbon-bigger-large-items-icon-size;
958
- padding: $ribbon-bigger-large-items-icon-padding;
959
- }
960
- }
961
-
962
- .e-dropdown-btn {
963
- .e-caret {
964
- font-size: $ribbon-bigger-dropdown-btn-size;
965
- line-height: $ribbon-bigger-dropdown-btn-line-height;
966
- padding: $ribbon-bigger-caret-dropdown-btn-padding;
967
- }
968
- }
969
- }
970
-
971
- .e-split-btn-wrapper {
972
- .e-dropdown-btn {
973
- .e-caret {
974
- font-size: $ribbon-bigger-dropdown-btn-size;
975
- line-height: $ribbon-bigger-dropdown-btn-line-height;
976
- padding: $ribbon-bigger-dropdown-btn-padding;
977
- }
978
- }
979
- }
980
-
981
- &.e-ribbon-medium-item,
982
- &.e-ribbon-small-item {
983
- .e-btn {
984
- font-size: $ribbon-bigger-items-btn-size;
985
- line-height: $ribbon-bigger-items-height;
986
-
987
- .e-btn-icon {
988
- font-size: $ribbon-bigger-items-icon-size;
989
- margin: $ribbon-bigger-items-margin;
990
- line-height: $ribbon-bigger-items-icon-height;
991
- }
992
- }
993
-
994
- .e-split-colorpicker.e-split-btn {
995
- padding: 0;
996
- border: none;
997
-
998
- .e-btn-icon {
999
- height: $ribbon-bigger-color-picker-height;
1000
- width: $ribbon-bigger-color-picker-width;
1001
- }
1002
- }
1003
-
1004
- .e-dropdown-btn .e-caret {
1005
- font-size: $ribbon-bigger-dropdown-caret-btn-size;
1006
- padding: $ribbon-bigger-dropdown-caret-btn-padding;
1007
- line-height: $ribbon-bigger-dropdown-caret-btn-height;
1008
- margin: 0;
1009
- }
1010
- }
1011
- }
1012
- }
1013
-
1014
- .e-bigger .e-ribbon-group-overflow-ddb,
1015
- .e-bigger.e-ribbon-group-overflow-ddb {
1016
- .e-ribbon-overflow-target {
1017
-
1018
- .e-ribbon-item > .e-input-group {
1019
- margin: $ribbon-bigger-overflow-wrapper-item-margin;
1020
- }
1021
-
1022
- .e-ribbon-item > .e-checkbox-wrapper {
1023
- margin: $ribbon-bigger-items-margin;
1024
- padding: 0;
1025
- }
1026
- }
1027
- }
1028
-
1029
- .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical,
1030
- .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical,
1031
- .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul,
1032
- .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-ul {
1033
- .e-menu-item {
1034
-
1035
- &.e-blankicon {
1036
- padding-left: $ribbon-bigger-menu-blank-icon-padding !important; /* stylelint-disable-line declaration-no-important */
1037
- }
1038
- }
1039
- }
1040
- }