@syncfusion/ej2-ribbon 27.1.50 → 28.1.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (96) hide show
  1. package/.gitleaksignore +5 -0
  2. package/README.md +2 -2
  3. package/dist/ej2-ribbon.umd.min.js +2 -2
  4. package/dist/global/ej2-ribbon.min.js +2 -2
  5. package/dist/global/index.d.ts +2 -2
  6. package/package.json +13 -13
  7. package/styles/bds-lite.css +2412 -0
  8. package/styles/bds-lite.scss +18 -0
  9. package/styles/bds.css +3038 -0
  10. package/styles/bds.scss +19 -0
  11. package/styles/bootstrap-dark-lite.css +50 -3
  12. package/styles/bootstrap-dark.css +51 -4
  13. package/styles/bootstrap-lite.css +50 -3
  14. package/styles/bootstrap.css +51 -4
  15. package/styles/bootstrap4-lite.css +50 -3
  16. package/styles/bootstrap4.css +50 -3
  17. package/styles/bootstrap5-dark-lite.css +51 -4
  18. package/styles/bootstrap5-dark.css +52 -5
  19. package/styles/bootstrap5-lite.css +51 -4
  20. package/styles/bootstrap5.3-lite.css +51 -4
  21. package/styles/bootstrap5.3.css +52 -5
  22. package/styles/bootstrap5.css +52 -5
  23. package/styles/fabric-dark-lite.css +51 -4
  24. package/styles/fabric-dark.css +52 -5
  25. package/styles/fabric-lite.css +51 -4
  26. package/styles/fabric.css +52 -5
  27. package/styles/fluent-dark-lite.css +50 -3
  28. package/styles/fluent-dark.css +50 -3
  29. package/styles/fluent-lite.css +50 -3
  30. package/styles/fluent.css +50 -3
  31. package/styles/fluent2-lite.css +55 -12
  32. package/styles/fluent2.css +57 -14
  33. package/styles/highcontrast-light-lite.css +51 -5
  34. package/styles/highcontrast-light.css +53 -7
  35. package/styles/highcontrast-lite.css +52 -6
  36. package/styles/highcontrast.css +54 -8
  37. package/styles/material-dark-lite.css +50 -3
  38. package/styles/material-dark.css +51 -4
  39. package/styles/material-lite.css +51 -4
  40. package/styles/material.css +52 -5
  41. package/styles/material3-dark-lite.css +52 -4
  42. package/styles/material3-dark.css +53 -5
  43. package/styles/material3-lite.css +52 -4
  44. package/styles/material3.css +53 -5
  45. package/styles/ribbon/_bds-definition.scss +2 -0
  46. package/styles/ribbon/_bootstrap-dark-definition.scss +3 -1
  47. package/styles/ribbon/_bootstrap-definition.scss +3 -1
  48. package/styles/ribbon/_bootstrap4-definition.scss +2 -0
  49. package/styles/ribbon/_bootstrap5-definition.scss +3 -1
  50. package/styles/ribbon/_bootstrap5.3-definition.scss +4 -2
  51. package/styles/ribbon/_fabric-dark-definition.scss +4 -2
  52. package/styles/ribbon/_fabric-definition.scss +4 -2
  53. package/styles/ribbon/_fluent-definition.scss +2 -0
  54. package/styles/ribbon/_fluent2-definition.scss +8 -6
  55. package/styles/ribbon/_fusionnew-definition.scss +2 -0
  56. package/styles/ribbon/_highcontrast-definition.scss +5 -3
  57. package/styles/ribbon/_highcontrast-light-definition.scss +5 -3
  58. package/styles/ribbon/_layout.scss +42 -8
  59. package/styles/ribbon/_material-dark-definition.scss +3 -1
  60. package/styles/ribbon/_material-definition.scss +4 -2
  61. package/styles/ribbon/_material3-definition.scss +4 -2
  62. package/styles/ribbon/_tailwind-definition.scss +2 -0
  63. package/styles/ribbon/_tailwind3-definition.scss +409 -0
  64. package/styles/ribbon/_theme.scss +16 -0
  65. package/styles/ribbon/bds.css +3038 -0
  66. package/styles/ribbon/bds.scss +19 -0
  67. package/styles/ribbon/bootstrap-dark.css +51 -4
  68. package/styles/ribbon/bootstrap.css +51 -4
  69. package/styles/ribbon/bootstrap4.css +50 -3
  70. package/styles/ribbon/bootstrap5-dark.css +52 -5
  71. package/styles/ribbon/bootstrap5.3.css +52 -5
  72. package/styles/ribbon/bootstrap5.css +52 -5
  73. package/styles/ribbon/fabric-dark.css +52 -5
  74. package/styles/ribbon/fabric.css +52 -5
  75. package/styles/ribbon/fluent-dark.css +50 -3
  76. package/styles/ribbon/fluent.css +50 -3
  77. package/styles/ribbon/fluent2.css +57 -14
  78. package/styles/ribbon/highcontrast-light.css +53 -7
  79. package/styles/ribbon/highcontrast.css +54 -8
  80. package/styles/ribbon/icons/_tailwind3.scss +9 -0
  81. package/styles/ribbon/material-dark.css +51 -4
  82. package/styles/ribbon/material.css +52 -5
  83. package/styles/ribbon/material3-dark.css +53 -5
  84. package/styles/ribbon/material3.css +53 -5
  85. package/styles/ribbon/tailwind-dark.css +50 -3
  86. package/styles/ribbon/tailwind.css +50 -3
  87. package/styles/ribbon/tailwind3.css +2888 -0
  88. package/styles/ribbon/tailwind3.scss +19 -0
  89. package/styles/tailwind-dark-lite.css +50 -3
  90. package/styles/tailwind-dark.css +50 -3
  91. package/styles/tailwind-lite.css +50 -3
  92. package/styles/tailwind.css +50 -3
  93. package/styles/tailwind3-lite.css +2262 -0
  94. package/styles/tailwind3-lite.scss +18 -0
  95. package/styles/tailwind3.css +2888 -0
  96. package/styles/tailwind3.scss +19 -0
package/styles/fluent-lite.css CHANGED
@@ -139,6 +139,36 @@
139
139
  display: block;
140
140
  border-radius: unset;
141
141
  }
142
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
143
+ min-width: 52px;
144
+ }
145
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
146
+ display: none;
147
+ }
148
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
149
+ min-width: 120px;
150
+ }
151
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
152
+ height: 20px;
153
+ }
154
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
155
+ border-radius: 4px;
156
+ }
157
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
158
+ display: -webkit-box;
159
+ display: -ms-flexbox;
160
+ display: flex;
161
+ -webkit-box-align: center;
162
+ -ms-flex-align: center;
163
+ align-items: center;
164
+ position: absolute;
165
+ gap: 30px;
166
+ width: 100%;
167
+ height: 100%;
168
+ z-index: 4;
169
+ padding: 10px;
170
+ overflow: hidden;
171
+ }
142
172
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
143
173
  overflow: hidden;
144
174
  }
@@ -401,6 +431,9 @@
401
431
  -ms-flex-align: center;
402
432
  align-items: center;
403
433
  }
434
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
435
+ gap: 16px;
436
+ }
404
437
  .e-ribbon.e-rbn .e-ribbon-tab-item {
405
438
  display: -webkit-inline-box;
406
439
  display: -ms-inline-flexbox;
@@ -895,12 +928,16 @@
895
928
  pointer-events: none;
896
929
  }
897
930
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
898
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
931
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
932
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
933
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
899
934
  border: 1px solid transparent;
900
935
  border-radius: 2px;
901
936
  }
902
937
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
903
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
938
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
939
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
904
941
  padding: 0;
905
942
  }
906
943
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1172,7 +1209,7 @@
1172
1209
  .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)) {
1173
1210
  padding-right: 34px;
1174
1211
  }
1175
- .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 {
1212
+ .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 {
1176
1213
  margin-right: 34px;
1177
1214
  }
1178
1215
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1464,6 +1501,16 @@
1464
1501
  border-radius: 2px;
1465
1502
  }
1466
1503
 
1504
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1505
+ background: #f3f2f1;
1506
+ }
1507
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1508
+ background-color: rgb(217, 217, 217);
1509
+ }
1510
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1511
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(255, 255, 255, 0)), color-stop(46%, #fff), color-stop(57%, rgba(255, 255, 255, 0)));
1512
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, #fff 46%, rgba(255, 255, 255, 0) 57%);
1513
+ }
1467
1514
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1468
1515
  border-color: unset;
1469
1516
  background: #f3f2f1;
package/styles/fluent.css CHANGED
@@ -139,6 +139,36 @@
139
139
  display: block;
140
140
  border-radius: unset;
141
141
  }
142
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container {
143
+ min-width: 52px;
144
+ }
145
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-ribbon-skeleton-hidden {
146
+ display: none;
147
+ }
148
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified {
149
+ min-width: 120px;
150
+ }
151
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton-container.e-simplified .e-ribbon-skeleton {
152
+ height: 20px;
153
+ }
154
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-skeleton {
155
+ border-radius: 4px;
156
+ }
157
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
158
+ display: -webkit-box;
159
+ display: -ms-flexbox;
160
+ display: flex;
161
+ -webkit-box-align: center;
162
+ -ms-flex-align: center;
163
+ align-items: center;
164
+ position: absolute;
165
+ gap: 30px;
166
+ width: 100%;
167
+ height: 100%;
168
+ z-index: 4;
169
+ padding: 10px;
170
+ overflow: hidden;
171
+ }
142
172
  .e-ribbon.e-rbn .e-ribbon-tab.e-tab .e-content > .e-item.e-active {
143
173
  overflow: hidden;
144
174
  }
@@ -401,6 +431,9 @@
401
431
  -ms-flex-align: center;
402
432
  align-items: center;
403
433
  }
434
+ .e-ribbon.e-rbn.e-ribbon-simplified-mode .e-ribbon-overlay {
435
+ gap: 16px;
436
+ }
404
437
  .e-ribbon.e-rbn .e-ribbon-tab-item {
405
438
  display: -webkit-inline-box;
406
439
  display: -ms-inline-flexbox;
@@ -895,12 +928,16 @@
895
928
  pointer-events: none;
896
929
  }
897
930
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper,
898
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper {
931
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container,
932
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper,
933
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container {
899
934
  border: 1px solid transparent;
900
935
  border-radius: 2px;
901
936
  }
902
937
  .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
903
- .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
938
+ .e-ribbon.e-rbn .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
939
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-wrapper .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn,
940
+ .e-ribbon-group-overflow-ddb .e-ribbon-item .e-colorpicker-container .e-split-btn-wrapper.e-rtl .e-split-colorpicker.e-split-btn {
904
941
  padding: 0;
905
942
  }
906
943
  .e-ribbon.e-rbn .e-ribbon-item .e-split-btn-wrapper,
@@ -1172,7 +1209,7 @@
1172
1209
  .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)) {
1173
1210
  padding-right: 34px;
1174
1211
  }
1175
- .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 {
1212
+ .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 {
1176
1213
  margin-right: 34px;
1177
1214
  }
1178
1215
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item > .e-split-btn-wrapper .e-icons.e-caret,
@@ -1464,6 +1501,16 @@
1464
1501
  border-radius: 2px;
1465
1502
  }
1466
1503
 
1504
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay {
1505
+ background: #f3f2f1;
1506
+ }
1507
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-skeleton-text {
1508
+ background-color: rgb(217, 217, 217);
1509
+ }
1510
+ .e-ribbon.e-rbn.e-ribbon-container .e-ribbon-overlay .e-ribbon-skeleton.e-skeleton.e-shimmer-wave::after {
1511
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(35%, rgba(255, 255, 255, 0)), color-stop(46%, #fff), color-stop(57%, rgba(255, 255, 255, 0)));
1512
+ background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 35%, #fff 46%, rgba(255, 255, 255, 0) 57%);
1513
+ }
1467
1514
  .e-ribbon.e-rbn .e-ribbon-tab .e-tab-header {
1468
1515
  border-color: unset;
1469
1516
  background: #f3f2f1;
package/styles/fluent2-lite.css CHANGED
@@ -73,7 +73,7 @@
73
73
 
74
74
  .e-ddl.e-popup {
75
75
  border: 0;
76
- border-radius: 8px;
76
+ border-radius: 4px;
77
77
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
78
78
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
79
79
  margin-top: 4px;
@@ -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 {
@@ -640,7 +673,7 @@
640
673
  line-height: 18px;
641
674
  height: auto;
642
675
  min-height: auto;
643
- padding: 6px 0 6px 10px;
676
+ padding: 6px 0 6px 8px;
644
677
  }
645
678
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
646
679
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -649,7 +682,7 @@
649
682
  line-height: 14px;
650
683
  height: auto;
651
684
  min-height: auto;
652
- padding: 8px 9px;
685
+ padding: 6px 4px 6px 2px;
653
686
  margin: 0;
654
687
  border: none;
655
688
  min-width: auto;
@@ -824,7 +857,7 @@
824
857
  -webkit-box-direction: normal;
825
858
  -ms-flex-direction: column;
826
859
  flex-direction: column;
827
- max-width: 11ch;
860
+ max-width: 12ch;
828
861
  min-width: -webkit-fit-content;
829
862
  min-width: -moz-fit-content;
830
863
  min-width: fit-content;
@@ -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: 2px 12px 2px 2px;
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/fluent2.css CHANGED
@@ -73,7 +73,7 @@
73
73
 
74
74
  .e-ddl.e-popup {
75
75
  border: 0;
76
- border-radius: 8px;
76
+ border-radius: 4px;
77
77
  -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
78
78
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.14), 0 0 2px 0 rgba(0, 0, 0, 0.12);
79
79
  margin-top: 4px;
@@ -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 {
@@ -640,7 +673,7 @@
640
673
  line-height: 18px;
641
674
  height: auto;
642
675
  min-height: auto;
643
- padding: 6px 0 6px 10px;
676
+ padding: 6px 0 6px 8px;
644
677
  }
645
678
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
646
679
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -649,7 +682,7 @@
649
682
  line-height: 14px;
650
683
  height: auto;
651
684
  min-height: auto;
652
- padding: 8px 9px;
685
+ padding: 6px 4px 6px 2px;
653
686
  margin: 0;
654
687
  border: none;
655
688
  min-width: auto;
@@ -824,7 +857,7 @@
824
857
  -webkit-box-direction: normal;
825
858
  -ms-flex-direction: column;
826
859
  flex-direction: column;
827
- max-width: 11ch;
860
+ max-width: 12ch;
828
861
  min-width: -webkit-fit-content;
829
862
  min-width: -moz-fit-content;
830
863
  min-width: fit-content;
@@ -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: 2px 12px 2px 2px;
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);
@@ -2512,7 +2555,7 @@
2512
2555
  .e-bigger.e-ribbon-group-overflow-ddb .e-input-group input.e-input {
2513
2556
  font-size: 16px;
2514
2557
  line-height: 22px;
2515
- padding: 9px 0 9px 12px;
2558
+ padding: 9px 0 9px 8px;
2516
2559
  height: auto;
2517
2560
  }
2518
2561
  .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
@@ -2521,7 +2564,7 @@
2521
2564
  .e-bigger.e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
2522
2565
  font-size: 18px;
2523
2566
  line-height: 18px;
2524
- padding: 11px 12px;
2567
+ padding: 8px 2px;
2525
2568
  }
2526
2569
  .e-bigger.e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,
2527
2570
  .e-bigger .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon.e-ddl-icon,
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;
@@ -518,7 +551,7 @@
518
551
  line-height: 22px;
519
552
  height: auto;
520
553
  min-height: auto;
521
- padding: 7px 0 7px 12px;
554
+ padding: 7px 0 7px 8px;
522
555
  }
523
556
  .e-ribbon.e-rbn .e-input-group.e-control-wrapper .e-input-group-icon,
524
557
  .e-ribbon-group-overflow-ddb .e-input-group.e-control-wrapper .e-input-group-icon {
@@ -702,7 +735,7 @@
702
735
  -webkit-box-direction: normal;
703
736
  -ms-flex-direction: column;
704
737
  flex-direction: column;
705
- max-width: 10ch;
738
+ max-width: 12ch;
706
739
  min-width: -webkit-fit-content;
707
740
  min-width: -moz-fit-content;
708
741
  min-width: fit-content;
@@ -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;