@syncfusion/ej2-ribbon 27.2.2 → 28.2.3

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 (95) hide show
  1. package/README.md +2 -2
  2. package/dist/ej2-ribbon.umd.min.js +2 -2
  3. package/dist/global/ej2-ribbon.min.js +2 -2
  4. package/dist/global/index.d.ts +2 -2
  5. package/package.json +13 -13
  6. package/styles/bds-lite.css +2412 -0
  7. package/styles/bds-lite.scss +18 -0
  8. package/styles/bds.css +3038 -0
  9. package/styles/bds.scss +19 -0
  10. package/styles/bootstrap-dark-lite.css +50 -3
  11. package/styles/bootstrap-dark.css +50 -3
  12. package/styles/bootstrap-lite.css +50 -3
  13. package/styles/bootstrap.css +50 -3
  14. package/styles/bootstrap4-lite.css +50 -3
  15. package/styles/bootstrap4.css +50 -3
  16. package/styles/bootstrap5-dark-lite.css +50 -3
  17. package/styles/bootstrap5-dark.css +50 -3
  18. package/styles/bootstrap5-lite.css +50 -3
  19. package/styles/bootstrap5.3-lite.css +50 -3
  20. package/styles/bootstrap5.3.css +50 -3
  21. package/styles/bootstrap5.css +50 -3
  22. package/styles/fabric-dark-lite.css +50 -3
  23. package/styles/fabric-dark.css +50 -3
  24. package/styles/fabric-lite.css +50 -3
  25. package/styles/fabric.css +50 -3
  26. package/styles/fluent-dark-lite.css +50 -3
  27. package/styles/fluent-dark.css +50 -3
  28. package/styles/fluent-lite.css +50 -3
  29. package/styles/fluent.css +50 -3
  30. package/styles/fluent2-lite.css +51 -8
  31. package/styles/fluent2.css +51 -8
  32. package/styles/highcontrast-light-lite.css +49 -3
  33. package/styles/highcontrast-light.css +49 -3
  34. package/styles/highcontrast-lite.css +50 -4
  35. package/styles/highcontrast.css +50 -4
  36. package/styles/material-dark-lite.css +50 -3
  37. package/styles/material-dark.css +50 -3
  38. package/styles/material-lite.css +50 -3
  39. package/styles/material.css +50 -3
  40. package/styles/material3-dark-lite.css +51 -3
  41. package/styles/material3-dark.css +51 -3
  42. package/styles/material3-lite.css +51 -3
  43. package/styles/material3.css +51 -3
  44. package/styles/ribbon/_bds-definition.scss +2 -0
  45. package/styles/ribbon/_bootstrap-dark-definition.scss +2 -0
  46. package/styles/ribbon/_bootstrap-definition.scss +2 -0
  47. package/styles/ribbon/_bootstrap4-definition.scss +2 -0
  48. package/styles/ribbon/_bootstrap5-definition.scss +2 -0
  49. package/styles/ribbon/_bootstrap5.3-definition.scss +2 -0
  50. package/styles/ribbon/_fabric-dark-definition.scss +2 -0
  51. package/styles/ribbon/_fabric-definition.scss +2 -0
  52. package/styles/ribbon/_fluent-definition.scss +2 -0
  53. package/styles/ribbon/_fluent2-definition.scss +3 -1
  54. package/styles/ribbon/_fusionnew-definition.scss +2 -0
  55. package/styles/ribbon/_highcontrast-definition.scss +2 -0
  56. package/styles/ribbon/_highcontrast-light-definition.scss +2 -0
  57. package/styles/ribbon/_layout.scss +42 -8
  58. package/styles/ribbon/_material-dark-definition.scss +2 -0
  59. package/styles/ribbon/_material-definition.scss +2 -0
  60. package/styles/ribbon/_material3-definition.scss +2 -0
  61. package/styles/ribbon/_tailwind-definition.scss +2 -0
  62. package/styles/ribbon/_tailwind3-definition.scss +409 -0
  63. package/styles/ribbon/_theme.scss +16 -0
  64. package/styles/ribbon/bds.css +3038 -0
  65. package/styles/ribbon/bds.scss +19 -0
  66. package/styles/ribbon/bootstrap-dark.css +50 -3
  67. package/styles/ribbon/bootstrap.css +50 -3
  68. package/styles/ribbon/bootstrap4.css +50 -3
  69. package/styles/ribbon/bootstrap5-dark.css +50 -3
  70. package/styles/ribbon/bootstrap5.3.css +50 -3
  71. package/styles/ribbon/bootstrap5.css +50 -3
  72. package/styles/ribbon/fabric-dark.css +50 -3
  73. package/styles/ribbon/fabric.css +50 -3
  74. package/styles/ribbon/fluent-dark.css +50 -3
  75. package/styles/ribbon/fluent.css +50 -3
  76. package/styles/ribbon/fluent2.css +51 -8
  77. package/styles/ribbon/highcontrast-light.css +49 -3
  78. package/styles/ribbon/highcontrast.css +50 -4
  79. package/styles/ribbon/icons/_tailwind3.scss +9 -0
  80. package/styles/ribbon/material-dark.css +50 -3
  81. package/styles/ribbon/material.css +50 -3
  82. package/styles/ribbon/material3-dark.css +51 -3
  83. package/styles/ribbon/material3.css +51 -3
  84. package/styles/ribbon/tailwind-dark.css +50 -3
  85. package/styles/ribbon/tailwind.css +50 -3
  86. package/styles/ribbon/tailwind3.css +2888 -0
  87. package/styles/ribbon/tailwind3.scss +19 -0
  88. package/styles/tailwind-dark-lite.css +50 -3
  89. package/styles/tailwind-dark.css +50 -3
  90. package/styles/tailwind-lite.css +50 -3
  91. package/styles/tailwind.css +50 -3
  92. package/styles/tailwind3-lite.css +2262 -0
  93. package/styles/tailwind3-lite.scss +18 -0
  94. package/styles/tailwind3.css +2888 -0
  95. package/styles/tailwind3.scss +19 -0
package/styles/bootstrap5-dark.css CHANGED
@@ -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;
@@ -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;
package/styles/bootstrap5-lite.css CHANGED
@@ -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;
@@ -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;
package/styles/bootstrap5.3-lite.css CHANGED
@@ -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;
@@ -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);
package/styles/bootstrap5.3.css CHANGED
@@ -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;
@@ -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);
package/styles/bootstrap5.css CHANGED
@@ -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;
@@ -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;
package/styles/fabric-dark-lite.css CHANGED
@@ -48,6 +48,36 @@
48
48
  display: block;
49
49
  border-radius: unset;
50
50
  }
51
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
52
+ min-width: 52px;
53
+ }
54
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
55
+ display: none;
56
+ }
57
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
58
+ min-width: 120px;
59
+ }
60
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
61
+ height: 20px;
62
+ }
63
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
64
+ border-radius: 4px;
65
+ }
66
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
67
+ display: -webkit-box;
68
+ display: -ms-flexbox;
69
+ display: flex;
70
+ -webkit-box-align: center;
71
+ -ms-flex-align: center;
72
+ align-items: center;
73
+ position: absolute;
74
+ gap: 30px;
75
+ width: 100%;
76
+ height: 100%;
77
+ z-index: 4;
78
+ padding: 10px;
79
+ overflow: hidden;
80
+ }
51
81
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
52
82
  overflow: hidden;
53
83
  }
@@ -310,6 +340,9 @@
310
340
  -ms-flex-align: center;
311
341
  align-items: center;
312
342
  }
343
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
344
+ gap: 16px;
345
+ }
313
346
  .e-ribbon.e-rbn .e-ribbon-tab-item {
314
347
  display: -webkit-inline-box;
315
348
  display: -ms-inline-flexbox;
@@ -804,12 +837,16 @@
804
837
  pointer-events: none;
805
838
  }
806
839
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
807
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
840
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
841
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
842
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
808
843
  border: 1px solid transparent;
809
844
  border-radius: unset;
810
845
  }
811
846
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
812
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
847
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
848
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
849
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
813
850
  padding: 0;
814
851
  }
815
852
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1081,7 +1118,7 @@
1081
1118
  .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)) {
1082
1119
  padding-right: 34px;
1083
1120
  }
1084
- .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 {
1121
+ .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 {
1085
1122
  margin-right: 34px;
1086
1123
  }
1087
1124
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1373,6 +1410,16 @@
1373
1410
  border-radius: unset;
1374
1411
  }
1375
1412
 
1413
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1414
+ background: #333232;
1415
+ }
1416
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1417
+ background-color: rgb(217, 217, 217);
1418
+ }
1419
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1420
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(29%, rgb(74, 72, 72)), color-stop(42%, rgba(255, 255, 255, 0)));
1421
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(74, 72, 72) 29%, rgba(255, 255, 255, 0) 42%);
1422
+ }
1376
1423
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1377
1424
  border-color: unset;
1378
1425
  background: #333232;
package/styles/fabric-dark.css CHANGED
@@ -48,6 +48,36 @@
48
48
  display: block;
49
49
  border-radius: unset;
50
50
  }
51
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
52
+ min-width: 52px;
53
+ }
54
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
55
+ display: none;
56
+ }
57
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
58
+ min-width: 120px;
59
+ }
60
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
61
+ height: 20px;
62
+ }
63
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
64
+ border-radius: 4px;
65
+ }
66
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
67
+ display: -webkit-box;
68
+ display: -ms-flexbox;
69
+ display: flex;
70
+ -webkit-box-align: center;
71
+ -ms-flex-align: center;
72
+ align-items: center;
73
+ position: absolute;
74
+ gap: 30px;
75
+ width: 100%;
76
+ height: 100%;
77
+ z-index: 4;
78
+ padding: 10px;
79
+ overflow: hidden;
80
+ }
51
81
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
52
82
  overflow: hidden;
53
83
  }
@@ -310,6 +340,9 @@
310
340
  -ms-flex-align: center;
311
341
  align-items: center;
312
342
  }
343
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
344
+ gap: 16px;
345
+ }
313
346
  .e-ribbon.e-rbn .e-ribbon-tab-item {
314
347
  display: -webkit-inline-box;
315
348
  display: -ms-inline-flexbox;
@@ -804,12 +837,16 @@
804
837
  pointer-events: none;
805
838
  }
806
839
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
807
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
840
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
841
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
842
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
808
843
  border: 1px solid transparent;
809
844
  border-radius: unset;
810
845
  }
811
846
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
812
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
847
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
848
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
849
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
813
850
  padding: 0;
814
851
  }
815
852
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1081,7 +1118,7 @@
1081
1118
  .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)) {
1082
1119
  padding-right: 34px;
1083
1120
  }
1084
- .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 {
1121
+ .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 {
1085
1122
  margin-right: 34px;
1086
1123
  }
1087
1124
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1373,6 +1410,16 @@
1373
1410
  border-radius: unset;
1374
1411
  }
1375
1412
 
1413
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1414
+ background: #333232;
1415
+ }
1416
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1417
+ background-color: rgb(217, 217, 217);
1418
+ }
1419
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1420
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(29%, rgb(74, 72, 72)), color-stop(42%, rgba(255, 255, 255, 0)));
1421
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(74, 72, 72) 29%, rgba(255, 255, 255, 0) 42%);
1422
+ }
1376
1423
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1377
1424
  border-color: unset;
1378
1425
  background: #333232;