@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

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 (96) hide show
  1. package/.gitleaksignore +5 -0
  2. package/README.md +2 -2
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/global/ej2-ribbon.min.js +2 -2
  5. package/dist/global/index.d.ts +2 -2
  6. package/package.json +13 -13
  7. package/styles/bds-lite.css +2412 -0
  8. package/styles/bds-lite.scss +18 -0
  9. package/styles/bds.css +3038 -0
  10. package/styles/bds.scss +19 -0
  11. package/styles/bootstrap-dark-lite.css +50 -3
  12. package/styles/bootstrap-dark.css +51 -4
  13. package/styles/bootstrap-lite.css +50 -3
  14. package/styles/bootstrap.css +51 -4
  15. package/styles/bootstrap4-lite.css +50 -3
  16. package/styles/bootstrap4.css +50 -3
  17. package/styles/bootstrap5-dark-lite.css +51 -4
  18. package/styles/bootstrap5-dark.css +52 -5
  19. package/styles/bootstrap5-lite.css +51 -4
  20. package/styles/bootstrap5.3-lite.css +51 -4
  21. package/styles/bootstrap5.3.css +52 -5
  22. package/styles/bootstrap5.css +52 -5
  23. package/styles/fabric-dark-lite.css +51 -4
  24. package/styles/fabric-dark.css +52 -5
  25. package/styles/fabric-lite.css +51 -4
  26. package/styles/fabric.css +52 -5
  27. package/styles/fluent-dark-lite.css +50 -3
  28. package/styles/fluent-dark.css +50 -3
  29. package/styles/fluent-lite.css +50 -3
  30. package/styles/fluent.css +50 -3
  31. package/styles/fluent2-lite.css +55 -12
  32. package/styles/fluent2.css +57 -14
  33. package/styles/highcontrast-light-lite.css +51 -5
  34. package/styles/highcontrast-light.css +53 -7
  35. package/styles/highcontrast-lite.css +52 -6
  36. package/styles/highcontrast.css +54 -8
  37. package/styles/material-dark-lite.css +50 -3
  38. package/styles/material-dark.css +51 -4
  39. package/styles/material-lite.css +51 -4
  40. package/styles/material.css +52 -5
  41. package/styles/material3-dark-lite.css +52 -4
  42. package/styles/material3-dark.css +53 -5
  43. package/styles/material3-lite.css +52 -4
  44. package/styles/material3.css +53 -5
  45. package/styles/ribbon/_bds-definition.scss +2 -0
  46. package/styles/ribbon/_bootstrap-dark-definition.scss +3 -1
  47. package/styles/ribbon/_bootstrap-definition.scss +3 -1
  48. package/styles/ribbon/_bootstrap4-definition.scss +2 -0
  49. package/styles/ribbon/_bootstrap5-definition.scss +3 -1
  50. package/styles/ribbon/_bootstrap5.3-definition.scss +4 -2
  51. package/styles/ribbon/_fabric-dark-definition.scss +4 -2
  52. package/styles/ribbon/_fabric-definition.scss +4 -2
  53. package/styles/ribbon/_fluent-definition.scss +2 -0
  54. package/styles/ribbon/_fluent2-definition.scss +8 -6
  55. package/styles/ribbon/_fusionnew-definition.scss +2 -0
  56. package/styles/ribbon/_highcontrast-definition.scss +5 -3
  57. package/styles/ribbon/_highcontrast-light-definition.scss +5 -3
  58. package/styles/ribbon/_layout.scss +42 -8
  59. package/styles/ribbon/_material-dark-definition.scss +3 -1
  60. package/styles/ribbon/_material-definition.scss +4 -2
  61. package/styles/ribbon/_material3-definition.scss +4 -2
  62. package/styles/ribbon/_tailwind-definition.scss +2 -0
  63. package/styles/ribbon/_tailwind3-definition.scss +409 -0
  64. package/styles/ribbon/_theme.scss +16 -0
  65. package/styles/ribbon/bds.css +3038 -0
  66. package/styles/ribbon/bds.scss +19 -0
  67. package/styles/ribbon/bootstrap-dark.css +51 -4
  68. package/styles/ribbon/bootstrap.css +51 -4
  69. package/styles/ribbon/bootstrap4.css +50 -3
  70. package/styles/ribbon/bootstrap5-dark.css +52 -5
  71. package/styles/ribbon/bootstrap5.3.css +52 -5
  72. package/styles/ribbon/bootstrap5.css +52 -5
  73. package/styles/ribbon/fabric-dark.css +52 -5
  74. package/styles/ribbon/fabric.css +52 -5
  75. package/styles/ribbon/fluent-dark.css +50 -3
  76. package/styles/ribbon/fluent.css +50 -3
  77. package/styles/ribbon/fluent2.css +57 -14
  78. package/styles/ribbon/highcontrast-light.css +53 -7
  79. package/styles/ribbon/highcontrast.css +54 -8
  80. package/styles/ribbon/icons/_tailwind3.scss +9 -0
  81. package/styles/ribbon/material-dark.css +51 -4
  82. package/styles/ribbon/material.css +52 -5
  83. package/styles/ribbon/material3-dark.css +53 -5
  84. package/styles/ribbon/material3.css +53 -5
  85. package/styles/ribbon/tailwind-dark.css +50 -3
  86. package/styles/ribbon/tailwind.css +50 -3
  87. package/styles/ribbon/tailwind3.css +2888 -0
  88. package/styles/ribbon/tailwind3.scss +19 -0
  89. package/styles/tailwind-dark-lite.css +50 -3
  90. package/styles/tailwind-dark.css +50 -3
  91. package/styles/tailwind-lite.css +50 -3
  92. package/styles/tailwind.css +50 -3
  93. package/styles/tailwind3-lite.css +2262 -0
  94. package/styles/tailwind3-lite.scss +18 -0
  95. package/styles/tailwind3.css +2888 -0
  96. package/styles/tailwind3.scss +19 -0
@@ -147,6 +147,36 @@
147
147
  display: block;
148
148
  border-radius: unset;
149
149
  }
150
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
151
+ min-width: 52px;
152
+ }
153
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
154
+ display: none;
155
+ }
156
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
157
+ min-width: 120px;
158
+ }
159
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
160
+ height: 20px;
161
+ }
162
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
163
+ border-radius: 4px;
164
+ }
165
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-align: center;
170
+ -ms-flex-align: center;
171
+ align-items: center;
172
+ position: absolute;
173
+ gap: 30px;
174
+ width: 100%;
175
+ height: 100%;
176
+ z-index: 4;
177
+ padding: 10px;
178
+ overflow: hidden;
179
+ }
150
180
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
151
181
  overflow: hidden;
152
182
  }
@@ -409,6 +439,9 @@
409
439
  -ms-flex-align: center;
410
440
  align-items: center;
411
441
  }
442
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
443
+ gap: 16px;
444
+ }
412
445
  .e-ribbon.e-rbn .e-ribbon-tab-item {
413
446
  display: -webkit-inline-box;
414
447
  display: -ms-inline-flexbox;
@@ -784,7 +817,7 @@
784
817
  -webkit-box-direction: normal;
785
818
  -ms-flex-direction: column;
786
819
  flex-direction: column;
787
- max-width: 10ch;
820
+ max-width: 12ch;
788
821
  min-width: -webkit-fit-content;
789
822
  min-width: -moz-fit-content;
790
823
  min-width: fit-content;
@@ -903,12 +936,16 @@
903
936
  pointer-events: none;
904
937
  }
905
938
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
906
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
939
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
941
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
907
942
  border: 1px solid transparent;
908
943
  border-radius: 4px;
909
944
  }
910
945
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
911
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
946
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
947
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
948
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
912
949
  padding: 0;
913
950
  }
914
951
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1180,7 +1217,7 @@
1180
1217
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1181
1218
  padding-right: 36px;
1182
1219
  }
1183
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1220
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1184
1221
  margin-right: 36px;
1185
1222
  }
1186
1223
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1472,6 +1509,16 @@
1472
1509
  border-radius: 2px;
1473
1510
  }
1474
1511
 
1512
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1513
+ background: #282d31;
1514
+ }
1515
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1516
+ background-color: rgb(217, 217, 217);
1517
+ }
1518
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1519
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, #282d31), color-stop(60%, rgba(255, 255, 255, 0)));
1520
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #282d31 38%, rgba(255, 255, 255, 0) 60%);
1521
+ }
1475
1522
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1476
1523
  border-color: unset;
1477
1524
  background: #282d31;
@@ -147,6 +147,36 @@
147
147
  display: block;
148
148
  border-radius: unset;
149
149
  }
150
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
151
+ min-width: 52px;
152
+ }
153
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
154
+ display: none;
155
+ }
156
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
157
+ min-width: 120px;
158
+ }
159
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
160
+ height: 20px;
161
+ }
162
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
163
+ border-radius: 4px;
164
+ }
165
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-align: center;
170
+ -ms-flex-align: center;
171
+ align-items: center;
172
+ position: absolute;
173
+ gap: 30px;
174
+ width: 100%;
175
+ height: 100%;
176
+ z-index: 4;
177
+ padding: 10px;
178
+ overflow: hidden;
179
+ }
150
180
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
151
181
  overflow: hidden;
152
182
  }
@@ -409,6 +439,9 @@
409
439
  -ms-flex-align: center;
410
440
  align-items: center;
411
441
  }
442
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
443
+ gap: 16px;
444
+ }
412
445
  .e-ribbon.e-rbn .e-ribbon-tab-item {
413
446
  display: -webkit-inline-box;
414
447
  display: -ms-inline-flexbox;
@@ -784,7 +817,7 @@
784
817
  -webkit-box-direction: normal;
785
818
  -ms-flex-direction: column;
786
819
  flex-direction: column;
787
- max-width: 10ch;
820
+ max-width: 12ch;
788
821
  min-width: -webkit-fit-content;
789
822
  min-width: -moz-fit-content;
790
823
  min-width: fit-content;
@@ -903,12 +936,16 @@
903
936
  pointer-events: none;
904
937
  }
905
938
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
906
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
939
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
941
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
907
942
  border: 1px solid transparent;
908
943
  border-radius: 4px;
909
944
  }
910
945
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
911
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
946
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
947
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
948
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
912
949
  padding: 0;
913
950
  }
914
951
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1180,7 +1217,7 @@
1180
1217
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1181
1218
  padding-right: 36px;
1182
1219
  }
1183
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1220
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1184
1221
  margin-right: 36px;
1185
1222
  }
1186
1223
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1472,6 +1509,16 @@
1472
1509
  border-radius: 2px;
1473
1510
  }
1474
1511
 
1512
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1513
+ background: #282d31;
1514
+ }
1515
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1516
+ background-color: rgb(217, 217, 217);
1517
+ }
1518
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1519
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, #282d31), color-stop(60%, rgba(255, 255, 255, 0)));
1520
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #282d31 38%, rgba(255, 255, 255, 0) 60%);
1521
+ }
1475
1522
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1476
1523
  border-color: unset;
1477
1524
  background: #282d31;
@@ -2432,7 +2479,7 @@
2432
2479
  font-size: 14px;
2433
2480
  line-height: 18px;
2434
2481
  padding: 0 5px;
2435
- max-width: 10ch;
2482
+ max-width: 12ch;
2436
2483
  }
2437
2484
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
2438
2485
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
@@ -147,6 +147,36 @@
147
147
  display: block;
148
148
  border-radius: unset;
149
149
  }
150
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
151
+ min-width: 52px;
152
+ }
153
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
154
+ display: none;
155
+ }
156
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
157
+ min-width: 120px;
158
+ }
159
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
160
+ height: 20px;
161
+ }
162
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
163
+ border-radius: 4px;
164
+ }
165
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-align: center;
170
+ -ms-flex-align: center;
171
+ align-items: center;
172
+ position: absolute;
173
+ gap: 30px;
174
+ width: 100%;
175
+ height: 100%;
176
+ z-index: 4;
177
+ padding: 10px;
178
+ overflow: hidden;
179
+ }
150
180
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
151
181
  overflow: hidden;
152
182
  }
@@ -409,6 +439,9 @@
409
439
  -ms-flex-align: center;
410
440
  align-items: center;
411
441
  }
442
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
443
+ gap: 16px;
444
+ }
412
445
  .e-ribbon.e-rbn .e-ribbon-tab-item {
413
446
  display: -webkit-inline-box;
414
447
  display: -ms-inline-flexbox;
@@ -784,7 +817,7 @@
784
817
  -webkit-box-direction: normal;
785
818
  -ms-flex-direction: column;
786
819
  flex-direction: column;
787
- max-width: 10ch;
820
+ max-width: 12ch;
788
821
  min-width: -webkit-fit-content;
789
822
  min-width: -moz-fit-content;
790
823
  min-width: fit-content;
@@ -903,12 +936,16 @@
903
936
  pointer-events: none;
904
937
  }
905
938
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
906
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
939
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
941
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
907
942
  border: 1px solid transparent;
908
943
  border-radius: 4px;
909
944
  }
910
945
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
911
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
946
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
947
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
948
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
912
949
  padding: 0;
913
950
  }
914
951
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1180,7 +1217,7 @@
1180
1217
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1181
1218
  padding-right: 36px;
1182
1219
  }
1183
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1220
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1184
1221
  margin-right: 36px;
1185
1222
  }
1186
1223
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1472,6 +1509,16 @@
1472
1509
  border-radius: 2px;
1473
1510
  }
1474
1511
 
1512
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1513
+ background: #f8f9fa;
1514
+ }
1515
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1516
+ background-color: rgb(217, 217, 217);
1517
+ }
1518
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1519
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, #f8f9fa), color-stop(60%, rgba(255, 255, 255, 0)));
1520
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #f8f9fa 38%, rgba(255, 255, 255, 0) 60%);
1521
+ }
1475
1522
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1476
1523
  border-color: unset;
1477
1524
  background: #f8f9fa;
@@ -151,6 +151,36 @@
151
151
  display: block;
152
152
  border-radius: unset;
153
153
  }
154
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
155
+ min-width: 52px;
156
+ }
157
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
158
+ display: none;
159
+ }
160
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
161
+ min-width: 120px;
162
+ }
163
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
164
+ height: 20px;
165
+ }
166
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
167
+ border-radius: 4px;
168
+ }
169
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
170
+ display: -webkit-box;
171
+ display: -ms-flexbox;
172
+ display: flex;
173
+ -webkit-box-align: center;
174
+ -ms-flex-align: center;
175
+ align-items: center;
176
+ position: absolute;
177
+ gap: 30px;
178
+ width: 100%;
179
+ height: 100%;
180
+ z-index: 4;
181
+ padding: 10px;
182
+ overflow: hidden;
183
+ }
154
184
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
155
185
  overflow: hidden;
156
186
  }
@@ -413,6 +443,9 @@
413
443
  -ms-flex-align: center;
414
444
  align-items: center;
415
445
  }
446
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
447
+ gap: 16px;
448
+ }
416
449
  .e-ribbon.e-rbn .e-ribbon-tab-item {
417
450
  display: -webkit-inline-box;
418
451
  display: -ms-inline-flexbox;
@@ -613,7 +646,7 @@
613
646
  line-height: 12px;
614
647
  height: auto;
615
648
  min-height: auto;
616
- padding: 7px 6px 7px 13px;
649
+ padding: 7px 4px 7px 2px;
617
650
  margin: 0;
618
651
  border: none;
619
652
  min-width: auto;
@@ -907,12 +940,16 @@
907
940
  pointer-events: none;
908
941
  }
909
942
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
910
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
943
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
944
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
945
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
911
946
  border: 1px solid transparent;
912
947
  border-radius: 4px;
913
948
  }
914
949
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
915
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
950
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
951
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
952
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
916
953
  padding: 0;
917
954
  }
918
955
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1184,7 +1221,7 @@
1184
1221
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1185
1222
  padding-right: 36px;
1186
1223
  }
1187
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1224
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1188
1225
  margin-right: 36px;
1189
1226
  }
1190
1227
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1476,6 +1513,16 @@
1476
1513
  border-radius: 2px;
1477
1514
  }
1478
1515
 
1516
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1517
+ background: var(--color-sf-content-bg-color);
1518
+ }
1519
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1520
+ background-color: rgb(217, 217, 217);
1521
+ }
1522
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1523
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, var(--color-sf-content-bg-color-alt1)), color-stop(60%, rgba(255, 255, 255, 0)));
1524
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, var(--color-sf-content-bg-color-alt1) 38%, rgba(255, 255, 255, 0) 60%);
1525
+ }
1479
1526
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1480
1527
  border-color: var(--color-sf-flyout-border);
1481
1528
  background: var(--color-sf-content-bg-color);
@@ -151,6 +151,36 @@
151
151
  display: block;
152
152
  border-radius: unset;
153
153
  }
154
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
155
+ min-width: 52px;
156
+ }
157
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
158
+ display: none;
159
+ }
160
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
161
+ min-width: 120px;
162
+ }
163
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
164
+ height: 20px;
165
+ }
166
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
167
+ border-radius: 4px;
168
+ }
169
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
170
+ display: -webkit-box;
171
+ display: -ms-flexbox;
172
+ display: flex;
173
+ -webkit-box-align: center;
174
+ -ms-flex-align: center;
175
+ align-items: center;
176
+ position: absolute;
177
+ gap: 30px;
178
+ width: 100%;
179
+ height: 100%;
180
+ z-index: 4;
181
+ padding: 10px;
182
+ overflow: hidden;
183
+ }
154
184
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
155
185
  overflow: hidden;
156
186
  }
@@ -413,6 +443,9 @@
413
443
  -ms-flex-align: center;
414
444
  align-items: center;
415
445
  }
446
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
447
+ gap: 16px;
448
+ }
416
449
  .e-ribbon.e-rbn .e-ribbon-tab-item {
417
450
  display: -webkit-inline-box;
418
451
  display: -ms-inline-flexbox;
@@ -613,7 +646,7 @@
613
646
  line-height: 12px;
614
647
  height: auto;
615
648
  min-height: auto;
616
- padding: 7px 6px 7px 13px;
649
+ padding: 7px 4px 7px 2px;
617
650
  margin: 0;
618
651
  border: none;
619
652
  min-width: auto;
@@ -907,12 +940,16 @@
907
940
  pointer-events: none;
908
941
  }
909
942
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
910
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
943
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
944
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
945
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
911
946
  border: 1px solid transparent;
912
947
  border-radius: 4px;
913
948
  }
914
949
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
915
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
950
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
951
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
952
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
916
953
  padding: 0;
917
954
  }
918
955
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1184,7 +1221,7 @@
1184
1221
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1185
1222
  padding-right: 36px;
1186
1223
  }
1187
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1224
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1188
1225
  margin-right: 36px;
1189
1226
  }
1190
1227
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1476,6 +1513,16 @@
1476
1513
  border-radius: 2px;
1477
1514
  }
1478
1515
 
1516
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1517
+ background: var(--color-sf-content-bg-color);
1518
+ }
1519
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1520
+ background-color: rgb(217, 217, 217);
1521
+ }
1522
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1523
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, var(--color-sf-content-bg-color-alt1)), color-stop(60%, rgba(255, 255, 255, 0)));
1524
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, var(--color-sf-content-bg-color-alt1) 38%, rgba(255, 255, 255, 0) 60%);
1525
+ }
1479
1526
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1480
1527
  border-color: var(--color-sf-flyout-border);
1481
1528
  background: var(--color-sf-content-bg-color);
@@ -2399,7 +2446,7 @@
2399
2446
  .e-bigger.e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
2400
2447
  font-size: 12px;
2401
2448
  line-height: 12px;
2402
- padding: 11px 8px 11px 2px;
2449
+ padding: 11px 4px 11px 2px;
2403
2450
  }
2404
2451
  .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,
2405
2452
  .e-bigger .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,
@@ -147,6 +147,36 @@
147
147
  display: block;
148
148
  border-radius: unset;
149
149
  }
150
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
151
+ min-width: 52px;
152
+ }
153
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
154
+ display: none;
155
+ }
156
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
157
+ min-width: 120px;
158
+ }
159
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
160
+ height: 20px;
161
+ }
162
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
163
+ border-radius: 4px;
164
+ }
165
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
166
+ display: -webkit-box;
167
+ display: -ms-flexbox;
168
+ display: flex;
169
+ -webkit-box-align: center;
170
+ -ms-flex-align: center;
171
+ align-items: center;
172
+ position: absolute;
173
+ gap: 30px;
174
+ width: 100%;
175
+ height: 100%;
176
+ z-index: 4;
177
+ padding: 10px;
178
+ overflow: hidden;
179
+ }
150
180
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
151
181
  overflow: hidden;
152
182
  }
@@ -409,6 +439,9 @@
409
439
  -ms-flex-align: center;
410
440
  align-items: center;
411
441
  }
442
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
443
+ gap: 16px;
444
+ }
412
445
  .e-ribbon.e-rbn .e-ribbon-tab-item {
413
446
  display: -webkit-inline-box;
414
447
  display: -ms-inline-flexbox;
@@ -784,7 +817,7 @@
784
817
  -webkit-box-direction: normal;
785
818
  -ms-flex-direction: column;
786
819
  flex-direction: column;
787
- max-width: 10ch;
820
+ max-width: 12ch;
788
821
  min-width: -webkit-fit-content;
789
822
  min-width: -moz-fit-content;
790
823
  min-width: fit-content;
@@ -903,12 +936,16 @@
903
936
  pointer-events: none;
904
937
  }
905
938
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
906
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
939
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
941
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
907
942
  border: 1px solid transparent;
908
943
  border-radius: 4px;
909
944
  }
910
945
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
911
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
946
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
947
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
948
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
912
949
  padding: 0;
913
950
  }
914
951
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1180,7 +1217,7 @@
1180
1217
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon)) {
1181
1218
  padding-right: 36px;
1182
1219
  }
1183
- .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1220
+ .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-wrapper, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-colorpicker-label)) .e-colorpicker-container, .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item:not(:has(.e-ribbon-combobox-label)) .e-input-group.e-control-wrapper {
1184
1221
  margin-right: 36px;
1185
1222
  }
1186
1223
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1472,6 +1509,16 @@
1472
1509
  border-radius: 2px;
1473
1510
  }
1474
1511
 
1512
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1513
+ background: #f8f9fa;
1514
+ }
1515
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1516
+ background-color: rgb(217, 217, 217);
1517
+ }
1518
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1519
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, #f8f9fa), color-stop(60%, rgba(255, 255, 255, 0)));
1520
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #f8f9fa 38%, rgba(255, 255, 255, 0) 60%);
1521
+ }
1475
1522
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1476
1523
  border-color: unset;
1477
1524
  background: #f8f9fa;
@@ -2432,7 +2479,7 @@
2432
2479
  font-size: 14px;
2433
2480
  line-height: 18px;
2434
2481
  padding: 0 5px;
2435
- max-width: 10ch;
2482
+ max-width: 12ch;
2436
2483
  }
2437
2484
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
2438
2485
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),