@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/bds.scss ADDED
@@ -0,0 +1,19 @@
1
+ @import 'ej2-base/styles/definition/bds.scss';
2
+ @import 'ej2-popups/styles/tooltip/bds-definition.scss';
3
+ @import 'ej2-buttons/styles/button/bds-definition.scss';
4
+ @import 'ej2-buttons/styles/check-box/bds-definition.scss';
5
+ @import 'ej2-splitbuttons/styles/drop-down-button/bds-definition.scss';
6
+ @import 'ej2-dropdowns/styles/drop-down-base/bds-definition.scss';
7
+ @import 'ej2-dropdowns/styles/drop-down-list/bds-definition.scss';
8
+ @import 'ej2-dropdowns/styles/combo-box/bds-definition.scss';
9
+ @import 'ej2-navigations/styles/h-scroll/bds-definition.scss';
10
+ @import 'ej2-navigations/styles/v-scroll/bds-definition.scss';
11
+ @import 'ej2-navigations/styles/context-menu/bds-definition.scss';
12
+ @import 'ej2-navigations/styles/toolbar/bds-definition.scss';
13
+ @import 'ej2-navigations/styles/menu/bds-definition.scss';
14
+ @import 'ej2-navigations/styles/tab/bds-definition.scss';
15
+ @import 'ej2-inputs/styles/color-picker/bds-definition.scss';
16
+ @import 'ribbon/bds-definition.scss';
17
+ @import 'ribbon/icons/bds.scss';
18
+ @import 'ribbon/all.scss';
19
+ @import 'ribbon/bigger.scss';
package/styles/bootstrap-dark-lite.css CHANGED
@@ -72,6 +72,36 @@
72
72
  display: block;
73
73
  border-radius: unset;
74
74
  }
75
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
76
+ min-width: 52px;
77
+ }
78
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
79
+ display: none;
80
+ }
81
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
82
+ min-width: 120px;
83
+ }
84
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
85
+ height: 20px;
86
+ }
87
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
88
+ border-radius: 4px;
89
+ }
90
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
91
+ display: -webkit-box;
92
+ display: -ms-flexbox;
93
+ display: flex;
94
+ -webkit-box-align: center;
95
+ -ms-flex-align: center;
96
+ align-items: center;
97
+ position: absolute;
98
+ gap: 30px;
99
+ width: 100%;
100
+ height: 100%;
101
+ z-index: 4;
102
+ padding: 10px;
103
+ overflow: hidden;
104
+ }
75
105
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
76
106
  overflow: hidden;
77
107
  }
@@ -334,6 +364,9 @@
334
364
  -ms-flex-align: center;
335
365
  align-items: center;
336
366
  }
367
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
368
+ gap: 16px;
369
+ }
337
370
  .e-ribbon.e-rbn .e-ribbon-tab-item {
338
371
  display: -webkit-inline-box;
339
372
  display: -ms-inline-flexbox;
@@ -828,12 +861,16 @@
828
861
  pointer-events: none;
829
862
  }
830
863
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
831
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
864
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
865
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
866
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
832
867
  border: 1px solid transparent;
833
868
  border-radius: 2px;
834
869
  }
835
870
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
836
- .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.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
872
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
873
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
837
874
  padding: 0;
838
875
  }
839
876
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1105,7 +1142,7 @@
1105
1142
  .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)) {
1106
1143
  padding-right: 36px;
1107
1144
  }
1108
- .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 {
1145
+ .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 {
1109
1146
  margin-right: 36px;
1110
1147
  }
1111
1148
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1397,6 +1434,16 @@
1397
1434
  border-radius: 4px;
1398
1435
  }
1399
1436
 
1437
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1438
+ background: #131313;
1439
+ }
1440
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1441
+ background-color: rgb(217, 217, 217);
1442
+ }
1443
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1444
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(80, 80, 80)), color-stop(42%, rgba(255, 255, 255, 0)));
1445
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(80, 80, 80) 28%, rgba(255, 255, 255, 0) 42%);
1446
+ }
1400
1447
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1401
1448
  border-color: unset;
1402
1449
  background: #131313;
package/styles/bootstrap-dark.css CHANGED
@@ -72,6 +72,36 @@
72
72
  display: block;
73
73
  border-radius: unset;
74
74
  }
75
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
76
+ min-width: 52px;
77
+ }
78
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
79
+ display: none;
80
+ }
81
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
82
+ min-width: 120px;
83
+ }
84
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
85
+ height: 20px;
86
+ }
87
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
88
+ border-radius: 4px;
89
+ }
90
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
91
+ display: -webkit-box;
92
+ display: -ms-flexbox;
93
+ display: flex;
94
+ -webkit-box-align: center;
95
+ -ms-flex-align: center;
96
+ align-items: center;
97
+ position: absolute;
98
+ gap: 30px;
99
+ width: 100%;
100
+ height: 100%;
101
+ z-index: 4;
102
+ padding: 10px;
103
+ overflow: hidden;
104
+ }
75
105
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
76
106
  overflow: hidden;
77
107
  }
@@ -334,6 +364,9 @@
334
364
  -ms-flex-align: center;
335
365
  align-items: center;
336
366
  }
367
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
368
+ gap: 16px;
369
+ }
337
370
  .e-ribbon.e-rbn .e-ribbon-tab-item {
338
371
  display: -webkit-inline-box;
339
372
  display: -ms-inline-flexbox;
@@ -828,12 +861,16 @@
828
861
  pointer-events: none;
829
862
  }
830
863
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
831
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
864
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
865
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
866
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
832
867
  border: 1px solid transparent;
833
868
  border-radius: 2px;
834
869
  }
835
870
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
836
- .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.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
872
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
873
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
837
874
  padding: 0;
838
875
  }
839
876
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1105,7 +1142,7 @@
1105
1142
  .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)) {
1106
1143
  padding-right: 36px;
1107
1144
  }
1108
- .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 {
1145
+ .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 {
1109
1146
  margin-right: 36px;
1110
1147
  }
1111
1148
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1397,6 +1434,16 @@
1397
1434
  border-radius: 4px;
1398
1435
  }
1399
1436
 
1437
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1438
+ background: #131313;
1439
+ }
1440
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1441
+ background-color: rgb(217, 217, 217);
1442
+ }
1443
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1444
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, rgb(80, 80, 80)), color-stop(42%, rgba(255, 255, 255, 0)));
1445
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(80, 80, 80) 28%, rgba(255, 255, 255, 0) 42%);
1446
+ }
1400
1447
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1401
1448
  border-color: unset;
1402
1449
  background: #131313;
package/styles/bootstrap-lite.css CHANGED
@@ -74,6 +74,36 @@
74
74
  display: block;
75
75
  border-radius: unset;
76
76
  }
77
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
78
+ min-width: 52px;
79
+ }
80
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
81
+ display: none;
82
+ }
83
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
84
+ min-width: 120px;
85
+ }
86
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
87
+ height: 20px;
88
+ }
89
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
90
+ border-radius: 4px;
91
+ }
92
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
93
+ display: -webkit-box;
94
+ display: -ms-flexbox;
95
+ display: flex;
96
+ -webkit-box-align: center;
97
+ -ms-flex-align: center;
98
+ align-items: center;
99
+ position: absolute;
100
+ gap: 30px;
101
+ width: 100%;
102
+ height: 100%;
103
+ z-index: 4;
104
+ padding: 10px;
105
+ overflow: hidden;
106
+ }
77
107
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
78
108
  overflow: hidden;
79
109
  }
@@ -336,6 +366,9 @@
336
366
  -ms-flex-align: center;
337
367
  align-items: center;
338
368
  }
369
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
370
+ gap: 16px;
371
+ }
339
372
  .e-ribbon.e-rbn .e-ribbon-tab-item {
340
373
  display: -webkit-inline-box;
341
374
  display: -ms-inline-flexbox;
@@ -830,12 +863,16 @@
830
863
  pointer-events: none;
831
864
  }
832
865
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
833
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
866
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
867
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
868
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
834
869
  border: 1px solid transparent;
835
870
  border-radius: 4px;
836
871
  }
837
872
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
838
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
873
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
874
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
875
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
839
876
  padding: 0;
840
877
  }
841
878
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1107,7 +1144,7 @@
1107
1144
  .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)) {
1108
1145
  padding-right: 36px;
1109
1146
  }
1110
- .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 {
1147
+ .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 {
1111
1148
  margin-right: 36px;
1112
1149
  }
1113
1150
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1399,6 +1436,16 @@
1399
1436
  border-radius: unset;
1400
1437
  }
1401
1438
 
1439
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1440
+ background: #f8f8f8;
1441
+ }
1442
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1443
+ background-color: rgb(217, 217, 217);
1444
+ }
1445
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1446
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, rgb(245, 245, 245)), color-stop(60%, rgba(255, 255, 255, 0)));
1447
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%);
1448
+ }
1402
1449
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1403
1450
  border-color: unset;
1404
1451
  background: #f8f8f8;
package/styles/bootstrap.css CHANGED
@@ -74,6 +74,36 @@
74
74
  display: block;
75
75
  border-radius: unset;
76
76
  }
77
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
78
+ min-width: 52px;
79
+ }
80
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
81
+ display: none;
82
+ }
83
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
84
+ min-width: 120px;
85
+ }
86
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
87
+ height: 20px;
88
+ }
89
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
90
+ border-radius: 4px;
91
+ }
92
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
93
+ display: -webkit-box;
94
+ display: -ms-flexbox;
95
+ display: flex;
96
+ -webkit-box-align: center;
97
+ -ms-flex-align: center;
98
+ align-items: center;
99
+ position: absolute;
100
+ gap: 30px;
101
+ width: 100%;
102
+ height: 100%;
103
+ z-index: 4;
104
+ padding: 10px;
105
+ overflow: hidden;
106
+ }
77
107
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
78
108
  overflow: hidden;
79
109
  }
@@ -336,6 +366,9 @@
336
366
  -ms-flex-align: center;
337
367
  align-items: center;
338
368
  }
369
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
370
+ gap: 16px;
371
+ }
339
372
  .e-ribbon.e-rbn .e-ribbon-tab-item {
340
373
  display: -webkit-inline-box;
341
374
  display: -ms-inline-flexbox;
@@ -830,12 +863,16 @@
830
863
  pointer-events: none;
831
864
  }
832
865
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
833
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
866
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
867
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
868
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
834
869
  border: 1px solid transparent;
835
870
  border-radius: 4px;
836
871
  }
837
872
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
838
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
873
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
874
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
875
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
839
876
  padding: 0;
840
877
  }
841
878
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1107,7 +1144,7 @@
1107
1144
  .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)) {
1108
1145
  padding-right: 36px;
1109
1146
  }
1110
- .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 {
1147
+ .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 {
1111
1148
  margin-right: 36px;
1112
1149
  }
1113
1150
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1399,6 +1436,16 @@
1399
1436
  border-radius: unset;
1400
1437
  }
1401
1438
 
1439
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1440
+ background: #f8f8f8;
1441
+ }
1442
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1443
+ background-color: rgb(217, 217, 217);
1444
+ }
1445
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1446
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(38%, rgb(245, 245, 245)), color-stop(60%, rgba(255, 255, 255, 0)));
1447
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, rgb(245, 245, 245) 38%, rgba(255, 255, 255, 0) 60%);
1448
+ }
1402
1449
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1403
1450
  border-color: unset;
1404
1451
  background: #f8f8f8;
package/styles/bootstrap4-lite.css CHANGED
@@ -116,6 +116,36 @@
116
116
  display: block;
117
117
  border-radius: unset;
118
118
  }
119
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
120
+ min-width: 52px;
121
+ }
122
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
123
+ display: none;
124
+ }
125
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
126
+ min-width: 120px;
127
+ }
128
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
129
+ height: 20px;
130
+ }
131
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
132
+ border-radius: 4px;
133
+ }
134
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
135
+ display: -webkit-box;
136
+ display: -ms-flexbox;
137
+ display: flex;
138
+ -webkit-box-align: center;
139
+ -ms-flex-align: center;
140
+ align-items: center;
141
+ position: absolute;
142
+ gap: 30px;
143
+ width: 100%;
144
+ height: 100%;
145
+ z-index: 4;
146
+ padding: 10px;
147
+ overflow: hidden;
148
+ }
119
149
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
120
150
  overflow: hidden;
121
151
  }
@@ -378,6 +408,9 @@
378
408
  -ms-flex-align: center;
379
409
  align-items: center;
380
410
  }
411
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
412
+ gap: 16px;
413
+ }
381
414
  .e-ribbon.e-rbn .e-ribbon-tab-item {
382
415
  display: -webkit-inline-box;
383
416
  display: -ms-inline-flexbox;
@@ -872,12 +905,16 @@
872
905
  pointer-events: none;
873
906
  }
874
907
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
875
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
908
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
909
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
910
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
876
911
  border: 1px solid transparent;
877
912
  border-radius: 4px;
878
913
  }
879
914
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
880
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
915
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
916
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
917
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
881
918
  padding: 0;
882
919
  }
883
920
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1149,7 +1186,7 @@
1149
1186
  .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)) {
1150
1187
  padding-right: 36px;
1151
1188
  }
1152
- .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 {
1189
+ .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 {
1153
1190
  margin-right: 36px;
1154
1191
  }
1155
1192
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1441,6 +1478,16 @@
1441
1478
  border-radius: 4px;
1442
1479
  }
1443
1480
 
1481
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1482
+ background: #f8f9fa;
1483
+ }
1484
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1485
+ background-color: rgb(217, 217, 217);
1486
+ }
1487
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1488
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, #adb5bd), color-stop(42%, rgba(255, 255, 255, 0)));
1489
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #adb5bd 28%, rgba(255, 255, 255, 0) 42%);
1490
+ }
1444
1491
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1445
1492
  border-color: unset;
1446
1493
  background: #f8f9fa;
package/styles/bootstrap4.css CHANGED
@@ -116,6 +116,36 @@
116
116
  display: block;
117
117
  border-radius: unset;
118
118
  }
119
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
120
+ min-width: 52px;
121
+ }
122
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
123
+ display: none;
124
+ }
125
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
126
+ min-width: 120px;
127
+ }
128
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
129
+ height: 20px;
130
+ }
131
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
132
+ border-radius: 4px;
133
+ }
134
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
135
+ display: -webkit-box;
136
+ display: -ms-flexbox;
137
+ display: flex;
138
+ -webkit-box-align: center;
139
+ -ms-flex-align: center;
140
+ align-items: center;
141
+ position: absolute;
142
+ gap: 30px;
143
+ width: 100%;
144
+ height: 100%;
145
+ z-index: 4;
146
+ padding: 10px;
147
+ overflow: hidden;
148
+ }
119
149
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
120
150
  overflow: hidden;
121
151
  }
@@ -378,6 +408,9 @@
378
408
  -ms-flex-align: center;
379
409
  align-items: center;
380
410
  }
411
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
412
+ gap: 16px;
413
+ }
381
414
  .e-ribbon.e-rbn .e-ribbon-tab-item {
382
415
  display: -webkit-inline-box;
383
416
  display: -ms-inline-flexbox;
@@ -872,12 +905,16 @@
872
905
  pointer-events: none;
873
906
  }
874
907
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
875
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
908
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
909
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
910
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
876
911
  border: 1px solid transparent;
877
912
  border-radius: 4px;
878
913
  }
879
914
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
880
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
915
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
916
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
917
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
881
918
  padding: 0;
882
919
  }
883
920
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1149,7 +1186,7 @@
1149
1186
  .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)) {
1150
1187
  padding-right: 36px;
1151
1188
  }
1152
- .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 {
1189
+ .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 {
1153
1190
  margin-right: 36px;
1154
1191
  }
1155
1192
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1441,6 +1478,16 @@
1441
1478
  border-radius: 4px;
1442
1479
  }
1443
1480
 
1481
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1482
+ background: #f8f9fa;
1483
+ }
1484
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1485
+ background-color: rgb(217, 217, 217);
1486
+ }
1487
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1488
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(15%, rgba(255, 255, 255, 0)), color-stop(28%, #adb5bd), color-stop(42%, rgba(255, 255, 255, 0)));
1489
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 15%, #adb5bd 28%, rgba(255, 255, 255, 0) 42%);
1490
+ }
1444
1491
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1445
1492
  border-color: unset;
1446
1493
  background: #f8f9fa;
package/styles/bootstrap5-dark-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: #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;