@syncfusion/ej2-ribbon 27.2.2 → 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 (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/ribbon/tailwind3.scss ADDED
@@ -0,0 +1,19 @@
1
+ @import 'ej2-base/styles/definition/tailwind3.scss';
2
+ @import 'ej2-popups/styles/tooltip/tailwind3-definition.scss';
3
+ @import 'ej2-buttons/styles/button/tailwind3-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/tailwind3-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/tailwind3-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/tailwind3-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/tailwind3-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/tailwind3-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/tailwind3-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/tailwind3-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/tailwind3-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/tailwind3-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/tailwind3-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/tailwind3-definition.scss';
15
+ @import 'ej2-inputs/styles/color-picker/tailwind3-definition.scss';
16
+ @import 'tailwind3-definition.scss';
17
+ @import 'icons/tailwind3.scss';
18
+ @import 'all.scss';
19
+ @import 'bigger.scss';
package/styles/tailwind-dark-lite.css CHANGED
@@ -170,6 +170,36 @@
170
170
  display: block;
171
171
  border-radius: unset;
172
172
  }
173
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
174
+ min-width: 52px;
175
+ }
176
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
177
+ display: none;
178
+ }
179
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
180
+ min-width: 120px;
181
+ }
182
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
183
+ height: 20px;
184
+ }
185
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
186
+ border-radius: 4px;
187
+ }
188
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ -webkit-box-align: center;
193
+ -ms-flex-align: center;
194
+ align-items: center;
195
+ position: absolute;
196
+ gap: 30px;
197
+ width: 100%;
198
+ height: 100%;
199
+ z-index: 4;
200
+ padding: 10px;
201
+ overflow: hidden;
202
+ }
173
203
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
174
204
  overflow: hidden;
175
205
  }
@@ -432,6 +462,9 @@
432
462
  -ms-flex-align: center;
433
463
  align-items: center;
434
464
  }
465
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
466
+ gap: 16px;
467
+ }
435
468
  .e-ribbon.e-rbn .e-ribbon-tab-item {
436
469
  display: -webkit-inline-box;
437
470
  display: -ms-inline-flexbox;
@@ -926,12 +959,16 @@
926
959
  pointer-events: none;
927
960
  }
928
961
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
929
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
962
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
963
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
964
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
930
965
  border: 1px solid transparent;
931
966
  border-radius: 4px;
932
967
  }
933
968
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
934
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
969
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
970
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
971
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
935
972
  padding: 0;
936
973
  }
937
974
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1203,7 +1240,7 @@
1203
1240
  .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)) {
1204
1241
  padding-right: 34px;
1205
1242
  }
1206
- .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 {
1243
+ .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 {
1207
1244
  margin-right: 34px;
1208
1245
  }
1209
1246
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1495,6 +1532,16 @@
1495
1532
  border-radius: 2px;
1496
1533
  }
1497
1534
 
1535
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1536
+ background: #374151;
1537
+ }
1538
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1539
+ background-color: rgb(217, 217, 217);
1540
+ }
1541
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1542
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(39%, rgba(255, 255, 255, 0)), color-stop(53%, #232e3e), color-stop(67%, rgba(255, 255, 255, 0)));
1543
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, #232e3e 53%, rgba(255, 255, 255, 0) 67%);
1544
+ }
1498
1545
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1499
1546
  border-color: unset;
1500
1547
  background: #374151;
package/styles/tailwind-dark.css CHANGED
@@ -170,6 +170,36 @@
170
170
  display: block;
171
171
  border-radius: unset;
172
172
  }
173
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
174
+ min-width: 52px;
175
+ }
176
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
177
+ display: none;
178
+ }
179
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
180
+ min-width: 120px;
181
+ }
182
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
183
+ height: 20px;
184
+ }
185
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
186
+ border-radius: 4px;
187
+ }
188
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ -webkit-box-align: center;
193
+ -ms-flex-align: center;
194
+ align-items: center;
195
+ position: absolute;
196
+ gap: 30px;
197
+ width: 100%;
198
+ height: 100%;
199
+ z-index: 4;
200
+ padding: 10px;
201
+ overflow: hidden;
202
+ }
173
203
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
174
204
  overflow: hidden;
175
205
  }
@@ -432,6 +462,9 @@
432
462
  -ms-flex-align: center;
433
463
  align-items: center;
434
464
  }
465
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
466
+ gap: 16px;
467
+ }
435
468
  .e-ribbon.e-rbn .e-ribbon-tab-item {
436
469
  display: -webkit-inline-box;
437
470
  display: -ms-inline-flexbox;
@@ -926,12 +959,16 @@
926
959
  pointer-events: none;
927
960
  }
928
961
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
929
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
962
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
963
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
964
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
930
965
  border: 1px solid transparent;
931
966
  border-radius: 4px;
932
967
  }
933
968
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
934
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
969
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
970
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
971
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
935
972
  padding: 0;
936
973
  }
937
974
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1203,7 +1240,7 @@
1203
1240
  .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)) {
1204
1241
  padding-right: 34px;
1205
1242
  }
1206
- .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 {
1243
+ .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 {
1207
1244
  margin-right: 34px;
1208
1245
  }
1209
1246
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1495,6 +1532,16 @@
1495
1532
  border-radius: 2px;
1496
1533
  }
1497
1534
 
1535
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1536
+ background: #374151;
1537
+ }
1538
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1539
+ background-color: rgb(217, 217, 217);
1540
+ }
1541
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1542
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(39%, rgba(255, 255, 255, 0)), color-stop(53%, #232e3e), color-stop(67%, rgba(255, 255, 255, 0)));
1543
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, #232e3e 53%, rgba(255, 255, 255, 0) 67%);
1544
+ }
1498
1545
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1499
1546
  border-color: unset;
1500
1547
  background: #374151;
package/styles/tailwind-lite.css CHANGED
@@ -170,6 +170,36 @@
170
170
  display: block;
171
171
  border-radius: unset;
172
172
  }
173
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
174
+ min-width: 52px;
175
+ }
176
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
177
+ display: none;
178
+ }
179
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
180
+ min-width: 120px;
181
+ }
182
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
183
+ height: 20px;
184
+ }
185
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
186
+ border-radius: 4px;
187
+ }
188
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ -webkit-box-align: center;
193
+ -ms-flex-align: center;
194
+ align-items: center;
195
+ position: absolute;
196
+ gap: 30px;
197
+ width: 100%;
198
+ height: 100%;
199
+ z-index: 4;
200
+ padding: 10px;
201
+ overflow: hidden;
202
+ }
173
203
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
174
204
  overflow: hidden;
175
205
  }
@@ -432,6 +462,9 @@
432
462
  -ms-flex-align: center;
433
463
  align-items: center;
434
464
  }
465
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
466
+ gap: 16px;
467
+ }
435
468
  .e-ribbon.e-rbn .e-ribbon-tab-item {
436
469
  display: -webkit-inline-box;
437
470
  display: -ms-inline-flexbox;
@@ -926,12 +959,16 @@
926
959
  pointer-events: none;
927
960
  }
928
961
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
929
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
962
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
963
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
964
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
930
965
  border: 1px solid transparent;
931
966
  border-radius: 4px;
932
967
  }
933
968
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
934
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
969
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
970
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
971
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
935
972
  padding: 0;
936
973
  }
937
974
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1203,7 +1240,7 @@
1203
1240
  .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)) {
1204
1241
  padding-right: 34px;
1205
1242
  }
1206
- .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 {
1243
+ .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 {
1207
1244
  margin-right: 34px;
1208
1245
  }
1209
1246
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1495,6 +1532,16 @@
1495
1532
  border-radius: 2px;
1496
1533
  }
1497
1534
 
1535
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1536
+ background: #f3f4f6;
1537
+ }
1538
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1539
+ background-color: rgb(217, 217, 217);
1540
+ }
1541
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1542
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(39%, rgba(255, 255, 255, 0)), color-stop(53%, #f9fafb), color-stop(67%, rgba(255, 255, 255, 0)));
1543
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, #f9fafb 53%, rgba(255, 255, 255, 0) 67%);
1544
+ }
1498
1545
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1499
1546
  border-color: unset;
1500
1547
  background: #f3f4f6;
package/styles/tailwind.css CHANGED
@@ -170,6 +170,36 @@
170
170
  display: block;
171
171
  border-radius: unset;
172
172
  }
173
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
174
+ min-width: 52px;
175
+ }
176
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
177
+ display: none;
178
+ }
179
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
180
+ min-width: 120px;
181
+ }
182
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
183
+ height: 20px;
184
+ }
185
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
186
+ border-radius: 4px;
187
+ }
188
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
189
+ display: -webkit-box;
190
+ display: -ms-flexbox;
191
+ display: flex;
192
+ -webkit-box-align: center;
193
+ -ms-flex-align: center;
194
+ align-items: center;
195
+ position: absolute;
196
+ gap: 30px;
197
+ width: 100%;
198
+ height: 100%;
199
+ z-index: 4;
200
+ padding: 10px;
201
+ overflow: hidden;
202
+ }
173
203
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
174
204
  overflow: hidden;
175
205
  }
@@ -432,6 +462,9 @@
432
462
  -ms-flex-align: center;
433
463
  align-items: center;
434
464
  }
465
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
466
+ gap: 16px;
467
+ }
435
468
  .e-ribbon.e-rbn .e-ribbon-tab-item {
436
469
  display: -webkit-inline-box;
437
470
  display: -ms-inline-flexbox;
@@ -926,12 +959,16 @@
926
959
  pointer-events: none;
927
960
  }
928
961
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
929
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
962
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
963
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
964
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
930
965
  border: 1px solid transparent;
931
966
  border-radius: 4px;
932
967
  }
933
968
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
934
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
969
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
970
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
971
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
935
972
  padding: 0;
936
973
  }
937
974
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1203,7 +1240,7 @@
1203
1240
  .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)) {
1204
1241
  padding-right: 34px;
1205
1242
  }
1206
- .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 {
1243
+ .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 {
1207
1244
  margin-right: 34px;
1208
1245
  }
1209
1246
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1495,6 +1532,16 @@
1495
1532
  border-radius: 2px;
1496
1533
  }
1497
1534
 
1535
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1536
+ background: #f3f4f6;
1537
+ }
1538
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1539
+ background-color: rgb(217, 217, 217);
1540
+ }
1541
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1542
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(39%, rgba(255, 255, 255, 0)), color-stop(53%, #f9fafb), color-stop(67%, rgba(255, 255, 255, 0)));
1543
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 39%, #f9fafb 53%, rgba(255, 255, 255, 0) 67%);
1544
+ }
1498
1545
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1499
1546
  border-color: unset;
1500
1547
  background: #f3f4f6;