@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/fluent2.css CHANGED
@@ -187,6 +187,36 @@
187
187
  display: block;
188
188
  border-radius: 4px;
189
189
  }
190
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
191
+ min-width: 52px;
192
+ }
193
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
194
+ display: none;
195
+ }
196
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
197
+ min-width: 120px;
198
+ }
199
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
200
+ height: 20px;
201
+ }
202
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
203
+ border-radius: 4px;
204
+ }
205
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
206
+ display: -webkit-box;
207
+ display: -ms-flexbox;
208
+ display: flex;
209
+ -webkit-box-align: center;
210
+ -ms-flex-align: center;
211
+ align-items: center;
212
+ position: absolute;
213
+ gap: 30px;
214
+ width: 100%;
215
+ height: 100%;
216
+ z-index: 4;
217
+ padding: 10px;
218
+ overflow: hidden;
219
+ }
190
220
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
191
221
  overflow: hidden;
192
222
  }
@@ -449,6 +479,9 @@
449
479
  -ms-flex-align: center;
450
480
  align-items: center;
451
481
  }
482
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
483
+ gap: 16px;
484
+ }
452
485
  .e-ribbon.e-rbn .e-ribbon-tab-item {
453
486
  display: -webkit-inline-box;
454
487
  display: -ms-inline-flexbox;
@@ -459,7 +492,7 @@
459
492
  }
460
493
  .e-ribbon.e-rbn .e-ribbon-group {
461
494
  position: relative;
462
- padding-top: 6px;
495
+ padding-top: 4px;
463
496
  height: 130px;
464
497
  }
465
498
  .e-ribbon.e-rbn .e-ribbon-group.e-hidden, .e-ribbon.e-rbn .e-ribbon-group.e-hide-group {
@@ -943,12 +976,16 @@
943
976
  pointer-events: none;
944
977
  }
945
978
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
946
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
979
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
980
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
981
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
947
982
  border: 1px solid transparent;
948
983
  border-radius: 4px;
949
984
  }
950
985
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .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 {
986
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
987
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
988
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
952
989
  padding: 0;
953
990
  }
954
991
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1250,7 +1287,7 @@
1250
1287
  .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)) {
1251
1288
  padding-right: 37px;
1252
1289
  }
1253
- .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 {
1290
+ .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 {
1254
1291
  margin-right: 37px;
1255
1292
  }
1256
1293
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1508,10 +1545,6 @@
1508
1545
  background-size: contain;
1509
1546
  background-position: center;
1510
1547
  }
1511
- .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1512
- padding: 0;
1513
- margin: 7px 8px 9px 12px;
1514
- }
1515
1548
 
1516
1549
  .e-ribbon-tooltip .e-tip-content {
1517
1550
  padding: 4px;
@@ -1546,6 +1579,16 @@
1546
1579
  border-radius: 4px;
1547
1580
  }
1548
1581
 
1582
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1583
+ background: var(--color-sf-content-bg-color-alt2);
1584
+ }
1585
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1586
+ background-color: rgb(217, 217, 217);
1587
+ }
1588
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1589
+ 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-alt2)), color-stop(60%, rgba(255, 255, 255, 0)));
1590
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, var(--color-sf-content-bg-color-alt2) 38%, rgba(255, 255, 255, 0) 60%);
1591
+ }
1549
1592
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1550
1593
  border-color: var(--color-sf-ribbon-border-color);
1551
1594
  background: var(--color-sf-content-bg-color-alt2);
package/styles/highcontrast-light-lite.css CHANGED
@@ -65,6 +65,36 @@
65
65
  display: block;
66
66
  border-radius: unset;
67
67
  }
68
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
69
+ min-width: 52px;
70
+ }
71
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
72
+ display: none;
73
+ }
74
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
75
+ min-width: 120px;
76
+ }
77
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
78
+ height: 20px;
79
+ }
80
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
81
+ border-radius: 4px;
82
+ }
83
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
84
+ display: -webkit-box;
85
+ display: -ms-flexbox;
86
+ display: flex;
87
+ -webkit-box-align: center;
88
+ -ms-flex-align: center;
89
+ align-items: center;
90
+ position: absolute;
91
+ gap: 30px;
92
+ width: 100%;
93
+ height: 100%;
94
+ z-index: 4;
95
+ padding: 10px;
96
+ overflow: hidden;
97
+ }
68
98
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
69
99
  overflow: hidden;
70
100
  }
@@ -327,6 +357,9 @@
327
357
  -ms-flex-align: center;
328
358
  align-items: center;
329
359
  }
360
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
361
+ gap: 16px;
362
+ }
330
363
  .e-ribbon.e-rbn .e-ribbon-tab-item {
331
364
  display: -webkit-inline-box;
332
365
  display: -ms-inline-flexbox;
@@ -821,12 +854,16 @@
821
854
  pointer-events: none;
822
855
  }
823
856
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
824
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
857
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
858
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
859
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
825
860
  border: 1px solid transparent;
826
861
  border-radius: unset;
827
862
  }
828
863
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
829
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
864
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
865
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
866
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
830
867
  padding: 0;
831
868
  }
832
869
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1098,7 +1135,7 @@
1098
1135
  .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)) {
1099
1136
  padding-right: 38px;
1100
1137
  }
1101
- .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 {
1138
+ .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 {
1102
1139
  margin-right: 38px;
1103
1140
  }
1104
1141
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1390,6 +1427,15 @@
1390
1427
  border-radius: unset;
1391
1428
  }
1392
1429
 
1430
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1431
+ background: #fff;
1432
+ }
1433
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1434
+ background-color: rgb(0, 0, 0);
1435
+ }
1436
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1437
+ background-image: linear-gradient(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%);
1438
+ }
1393
1439
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1394
1440
  border-color: #757575;
1395
1441
  background: #fff;
package/styles/highcontrast-light.css CHANGED
@@ -65,6 +65,36 @@
65
65
  display: block;
66
66
  border-radius: unset;
67
67
  }
68
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
69
+ min-width: 52px;
70
+ }
71
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
72
+ display: none;
73
+ }
74
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
75
+ min-width: 120px;
76
+ }
77
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
78
+ height: 20px;
79
+ }
80
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
81
+ border-radius: 4px;
82
+ }
83
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
84
+ display: -webkit-box;
85
+ display: -ms-flexbox;
86
+ display: flex;
87
+ -webkit-box-align: center;
88
+ -ms-flex-align: center;
89
+ align-items: center;
90
+ position: absolute;
91
+ gap: 30px;
92
+ width: 100%;
93
+ height: 100%;
94
+ z-index: 4;
95
+ padding: 10px;
96
+ overflow: hidden;
97
+ }
68
98
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
69
99
  overflow: hidden;
70
100
  }
@@ -327,6 +357,9 @@
327
357
  -ms-flex-align: center;
328
358
  align-items: center;
329
359
  }
360
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
361
+ gap: 16px;
362
+ }
330
363
  .e-ribbon.e-rbn .e-ribbon-tab-item {
331
364
  display: -webkit-inline-box;
332
365
  display: -ms-inline-flexbox;
@@ -821,12 +854,16 @@
821
854
  pointer-events: none;
822
855
  }
823
856
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
824
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
857
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
858
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
859
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
825
860
  border: 1px solid transparent;
826
861
  border-radius: unset;
827
862
  }
828
863
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
829
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
864
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
865
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
866
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
830
867
  padding: 0;
831
868
  }
832
869
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1098,7 +1135,7 @@
1098
1135
  .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)) {
1099
1136
  padding-right: 38px;
1100
1137
  }
1101
- .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 {
1138
+ .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 {
1102
1139
  margin-right: 38px;
1103
1140
  }
1104
1141
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1390,6 +1427,15 @@
1390
1427
  border-radius: unset;
1391
1428
  }
1392
1429
 
1430
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1431
+ background: #fff;
1432
+ }
1433
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1434
+ background-color: rgb(0, 0, 0);
1435
+ }
1436
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1437
+ background-image: linear-gradient(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%);
1438
+ }
1393
1439
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1394
1440
  border-color: #757575;
1395
1441
  background: #fff;
package/styles/highcontrast-lite.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .e-ddl.e-popup .e-content.e-nodata {
32
32
  background-color: #000;
33
33
  }
34
- .e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
34
+ .e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
35
35
  color: #ffd939;
36
36
  }
37
37
  .e-ddl.e-popup .e-input-group {
@@ -70,6 +70,36 @@
70
70
  display: block;
71
71
  border-radius: unset;
72
72
  }
73
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
74
+ min-width: 52px;
75
+ }
76
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
77
+ display: none;
78
+ }
79
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
80
+ min-width: 120px;
81
+ }
82
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
83
+ height: 20px;
84
+ }
85
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
86
+ border-radius: 4px;
87
+ }
88
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
89
+ display: -webkit-box;
90
+ display: -ms-flexbox;
91
+ display: flex;
92
+ -webkit-box-align: center;
93
+ -ms-flex-align: center;
94
+ align-items: center;
95
+ position: absolute;
96
+ gap: 30px;
97
+ width: 100%;
98
+ height: 100%;
99
+ z-index: 4;
100
+ padding: 10px;
101
+ overflow: hidden;
102
+ }
73
103
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
74
104
  overflow: hidden;
75
105
  }
@@ -332,6 +362,9 @@
332
362
  -ms-flex-align: center;
333
363
  align-items: center;
334
364
  }
365
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
366
+ gap: 16px;
367
+ }
335
368
  .e-ribbon.e-rbn .e-ribbon-tab-item {
336
369
  display: -webkit-inline-box;
337
370
  display: -ms-inline-flexbox;
@@ -826,12 +859,16 @@
826
859
  pointer-events: none;
827
860
  }
828
861
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
829
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
862
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
863
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
864
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
830
865
  border: 1px solid transparent;
831
866
  border-radius: unset;
832
867
  }
833
868
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
834
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
869
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
870
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
871
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
835
872
  padding: 0;
836
873
  }
837
874
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1103,7 +1140,7 @@
1103
1140
  .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)) {
1104
1141
  padding-right: 34px;
1105
1142
  }
1106
- .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 {
1143
+ .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 {
1107
1144
  margin-right: 34px;
1108
1145
  }
1109
1146
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1395,6 +1432,15 @@
1395
1432
  border-radius: unset;
1396
1433
  }
1397
1434
 
1435
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1436
+ background: #000;
1437
+ }
1438
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1439
+ background-color: rgb(0, 0, 0);
1440
+ }
1441
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1442
+ background-image: linear-gradient(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%);
1443
+ }
1398
1444
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1399
1445
  border-color: #969696;
1400
1446
  background: #000;
package/styles/highcontrast.css CHANGED
@@ -31,7 +31,7 @@
31
31
  .e-ddl.e-popup .e-content.e-nodata {
32
32
  background-color: #000;
33
33
  }
34
- .e-ddl.e-popup .e-dropdownbase .e-list-item .e-highlight {
34
+ .e-ddl.e-popup .e-dropdownbase .e-list-item:not(.e-active) .e-highlight {
35
35
  color: #ffd939;
36
36
  }
37
37
  .e-ddl.e-popup .e-input-group {
@@ -70,6 +70,36 @@
70
70
  display: block;
71
71
  border-radius: unset;
72
72
  }
73
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
74
+ min-width: 52px;
75
+ }
76
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
77
+ display: none;
78
+ }
79
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
80
+ min-width: 120px;
81
+ }
82
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
83
+ height: 20px;
84
+ }
85
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
86
+ border-radius: 4px;
87
+ }
88
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
89
+ display: -webkit-box;
90
+ display: -ms-flexbox;
91
+ display: flex;
92
+ -webkit-box-align: center;
93
+ -ms-flex-align: center;
94
+ align-items: center;
95
+ position: absolute;
96
+ gap: 30px;
97
+ width: 100%;
98
+ height: 100%;
99
+ z-index: 4;
100
+ padding: 10px;
101
+ overflow: hidden;
102
+ }
73
103
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
74
104
  overflow: hidden;
75
105
  }
@@ -332,6 +362,9 @@
332
362
  -ms-flex-align: center;
333
363
  align-items: center;
334
364
  }
365
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
366
+ gap: 16px;
367
+ }
335
368
  .e-ribbon.e-rbn .e-ribbon-tab-item {
336
369
  display: -webkit-inline-box;
337
370
  display: -ms-inline-flexbox;
@@ -826,12 +859,16 @@
826
859
  pointer-events: none;
827
860
  }
828
861
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
829
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
862
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
863
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
864
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
830
865
  border: 1px solid transparent;
831
866
  border-radius: unset;
832
867
  }
833
868
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
834
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
869
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
870
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
871
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
835
872
  padding: 0;
836
873
  }
837
874
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1103,7 +1140,7 @@
1103
1140
  .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)) {
1104
1141
  padding-right: 34px;
1105
1142
  }
1106
- .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 {
1143
+ .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 {
1107
1144
  margin-right: 34px;
1108
1145
  }
1109
1146
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1395,6 +1432,15 @@
1395
1432
  border-radius: unset;
1396
1433
  }
1397
1434
 
1435
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1436
+ background: #000;
1437
+ }
1438
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1439
+ background-color: rgb(0, 0, 0);
1440
+ }
1441
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1442
+ background-image: linear-gradient(70deg, rgba(255, 255, 255, 0) 38%, rgb(218, 213, 217) 41%, rgba(255, 255, 255, 0) 43%);
1443
+ }
1398
1444
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1399
1445
  border-color: #969696;
1400
1446
  background: #000;
package/styles/material-dark-lite.css CHANGED
@@ -208,6 +208,36 @@
208
208
  display: block;
209
209
  border-radius: unset;
210
210
  }
211
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
212
+ min-width: 52px;
213
+ }
214
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
215
+ display: none;
216
+ }
217
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
218
+ min-width: 120px;
219
+ }
220
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
221
+ height: 20px;
222
+ }
223
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
224
+ border-radius: 4px;
225
+ }
226
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
227
+ display: -webkit-box;
228
+ display: -ms-flexbox;
229
+ display: flex;
230
+ -webkit-box-align: center;
231
+ -ms-flex-align: center;
232
+ align-items: center;
233
+ position: absolute;
234
+ gap: 30px;
235
+ width: 100%;
236
+ height: 100%;
237
+ z-index: 4;
238
+ padding: 10px;
239
+ overflow: hidden;
240
+ }
211
241
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
212
242
  overflow: hidden;
213
243
  }
@@ -470,6 +500,9 @@
470
500
  -ms-flex-align: center;
471
501
  align-items: center;
472
502
  }
503
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
504
+ gap: 16px;
505
+ }
473
506
  .e-ribbon.e-rbn .e-ribbon-tab-item {
474
507
  display: -webkit-inline-box;
475
508
  display: -ms-inline-flexbox;
@@ -964,12 +997,16 @@
964
997
  pointer-events: none;
965
998
  }
966
999
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
967
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
1000
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
1001
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
1002
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
968
1003
  border: 1px solid transparent;
969
1004
  border-radius: unset;
970
1005
  }
971
1006
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
972
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
1007
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
1008
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
1009
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
973
1010
  padding: 0;
974
1011
  }
975
1012
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1241,7 +1278,7 @@
1241
1278
  .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)) {
1242
1279
  padding-right: 34px;
1243
1280
  }
1244
- .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 {
1281
+ .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 {
1245
1282
  margin-right: 34px;
1246
1283
  }
1247
1284
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1533,6 +1570,16 @@
1533
1570
  border-radius: unset;
1534
1571
  }
1535
1572
 
1573
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1574
+ background: #212121;
1575
+ }
1576
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1577
+ background-color: rgb(217, 217, 217);
1578
+ }
1579
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1580
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(117, 117, 117)), color-stop(42%, rgba(255, 255, 255, 0)));
1581
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(117, 117, 117) 28%, rgba(255, 255, 255, 0) 42%);
1582
+ }
1536
1583
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1537
1584
  border-color: #757575;
1538
1585
  background: #212121;
package/styles/material-dark.css CHANGED
@@ -208,6 +208,36 @@
208
208
  display: block;
209
209
  border-radius: unset;
210
210
  }
211
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
212
+ min-width: 52px;
213
+ }
214
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
215
+ display: none;
216
+ }
217
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
218
+ min-width: 120px;
219
+ }
220
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
221
+ height: 20px;
222
+ }
223
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
224
+ border-radius: 4px;
225
+ }
226
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
227
+ display: -webkit-box;
228
+ display: -ms-flexbox;
229
+ display: flex;
230
+ -webkit-box-align: center;
231
+ -ms-flex-align: center;
232
+ align-items: center;
233
+ position: absolute;
234
+ gap: 30px;
235
+ width: 100%;
236
+ height: 100%;
237
+ z-index: 4;
238
+ padding: 10px;
239
+ overflow: hidden;
240
+ }
211
241
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
212
242
  overflow: hidden;
213
243
  }
@@ -470,6 +500,9 @@
470
500
  -ms-flex-align: center;
471
501
  align-items: center;
472
502
  }
503
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
504
+ gap: 16px;
505
+ }
473
506
  .e-ribbon.e-rbn .e-ribbon-tab-item {
474
507
  display: -webkit-inline-box;
475
508
  display: -ms-inline-flexbox;
@@ -964,12 +997,16 @@
964
997
  pointer-events: none;
965
998
  }
966
999
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
967
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
1000
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
1001
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
1002
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
968
1003
  border: 1px solid transparent;
969
1004
  border-radius: unset;
970
1005
  }
971
1006
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
972
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
1007
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
1008
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
1009
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
973
1010
  padding: 0;
974
1011
  }
975
1012
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1241,7 +1278,7 @@
1241
1278
  .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)) {
1242
1279
  padding-right: 34px;
1243
1280
  }
1244
- .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 {
1281
+ .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 {
1245
1282
  margin-right: 34px;
1246
1283
  }
1247
1284
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1533,6 +1570,16 @@
1533
1570
  border-radius: unset;
1534
1571
  }
1535
1572
 
1573
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1574
+ background: #212121;
1575
+ }
1576
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1577
+ background-color: rgb(217, 217, 217);
1578
+ }
1579
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1580
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(117, 117, 117)), color-stop(42%, rgba(255, 255, 255, 0)));
1581
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(117, 117, 117) 28%, rgba(255, 255, 255, 0) 42%);
1582
+ }
1536
1583
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1537
1584
  border-color: #757575;
1538
1585
  background: #212121;