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