@syncfusion/ej2-ribbon 26.2.5 → 26.2.8

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 (59) hide show
  1. package/dist/ej2-ribbon.umd.min.js +1 -1
  2. package/dist/global/ej2-ribbon.min.js +1 -1
  3. package/dist/global/index.d.ts +1 -1
  4. package/hotfix/26.1.35_Vol2.txt +1 -0
  5. package/package.json +9 -9
  6. package/styles/bootstrap-dark.css +89 -6
  7. package/styles/bootstrap.css +89 -6
  8. package/styles/bootstrap4.css +89 -6
  9. package/styles/bootstrap5-dark.css +89 -6
  10. package/styles/bootstrap5.css +89 -6
  11. package/styles/fabric-dark.css +89 -6
  12. package/styles/fabric.css +89 -6
  13. package/styles/fluent-dark.css +89 -6
  14. package/styles/fluent.css +89 -6
  15. package/styles/fluent2.css +98 -1039
  16. package/styles/highcontrast-light.css +89 -6
  17. package/styles/highcontrast.css +89 -6
  18. package/styles/material-dark.css +89 -6
  19. package/styles/material.css +89 -6
  20. package/styles/material3-dark.css +90 -60
  21. package/styles/material3.css +92 -116
  22. package/styles/ribbon/_bds-definition.scss +8 -0
  23. package/styles/ribbon/_bootstrap-dark-definition.scss +10 -2
  24. package/styles/ribbon/_bootstrap-definition.scss +10 -2
  25. package/styles/ribbon/_bootstrap4-definition.scss +10 -2
  26. package/styles/ribbon/_bootstrap5-definition.scss +10 -2
  27. package/styles/ribbon/_bootstrap5.3-definition.scss +10 -2
  28. package/styles/ribbon/_fabric-dark-definition.scss +10 -2
  29. package/styles/ribbon/_fabric-definition.scss +10 -2
  30. package/styles/ribbon/_fluent-definition.scss +10 -2
  31. package/styles/ribbon/_fluent2-definition.scss +10 -2
  32. package/styles/ribbon/_fusionnew-definition.scss +8 -0
  33. package/styles/ribbon/_highcontrast-definition.scss +10 -2
  34. package/styles/ribbon/_highcontrast-light-definition.scss +10 -2
  35. package/styles/ribbon/_layout.scss +62 -8
  36. package/styles/ribbon/_material-dark-definition.scss +10 -2
  37. package/styles/ribbon/_material-definition.scss +10 -2
  38. package/styles/ribbon/_material3-definition.scss +10 -2
  39. package/styles/ribbon/_tailwind-definition.scss +10 -2
  40. package/styles/ribbon/bootstrap-dark.css +89 -6
  41. package/styles/ribbon/bootstrap.css +89 -6
  42. package/styles/ribbon/bootstrap4.css +89 -6
  43. package/styles/ribbon/bootstrap5-dark.css +89 -6
  44. package/styles/ribbon/bootstrap5.css +89 -6
  45. package/styles/ribbon/fabric-dark.css +89 -6
  46. package/styles/ribbon/fabric.css +89 -6
  47. package/styles/ribbon/fluent-dark.css +89 -6
  48. package/styles/ribbon/fluent.css +89 -6
  49. package/styles/ribbon/fluent2.css +98 -1039
  50. package/styles/ribbon/highcontrast-light.css +89 -6
  51. package/styles/ribbon/highcontrast.css +89 -6
  52. package/styles/ribbon/material-dark.css +89 -6
  53. package/styles/ribbon/material.css +89 -6
  54. package/styles/ribbon/material3-dark.css +90 -60
  55. package/styles/ribbon/material3.css +92 -116
  56. package/styles/ribbon/tailwind-dark.css +89 -6
  57. package/styles/ribbon/tailwind.css +89 -6
  58. package/styles/tailwind-dark.css +89 -6
  59. package/styles/tailwind.css +89 -6
package/styles/fluent.css CHANGED
@@ -604,9 +604,14 @@
604
604
  .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:not(.e-separator) .e-menu-icon, .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:not(.e-separator) .e-menu-icon {
605
605
  font-size: 16px;
606
606
  line-height: 16px;
607
+ min-height: 16px;
608
+ min-width: 16px;
609
+ background-repeat: no-repeat;
610
+ background-size: contain;
611
+ background-position: center;
607
612
  width: auto;
608
613
  margin-right: unset;
609
- padding: 11px 18px 11px 16px;
614
+ margin: 11px 18px 15px 16px;
610
615
  }
611
616
  .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:not(.e-separator).e-blankicon, .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:not(.e-separator).e-blankicon {
612
617
  padding-left: 50px !important; /* stylelint-disable-line declaration-no-important */
@@ -849,6 +854,11 @@
849
854
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
850
855
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
851
856
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
857
+ min-height: 24px;
858
+ min-width: 24px;
859
+ background-repeat: no-repeat;
860
+ background-size: contain;
861
+ background-position: center;
852
862
  font-size: 24px;
853
863
  font-weight: 400;
854
864
  padding: 8px 6px 4px;
@@ -989,6 +999,15 @@
989
999
  line-height: 16px;
990
1000
  margin: 5px;
991
1001
  }
1002
+ .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret), .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1003
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1004
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1005
+ min-height: 16px;
1006
+ min-width: 16px;
1007
+ background-repeat: no-repeat;
1008
+ background-size: contain;
1009
+ background-position: center;
1010
+ }
992
1011
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-colorpicker-wrapper .e-split-btn-wrapper, .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-colorpicker-wrapper .e-split-btn-wrapper,
993
1012
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-colorpicker-wrapper .e-split-btn-wrapper,
994
1013
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-colorpicker-wrapper .e-split-btn-wrapper {
@@ -1139,6 +1158,10 @@
1139
1158
  width: 100%;
1140
1159
  height: 32px;
1141
1160
  }
1161
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1162
+ min-width: 14px;
1163
+ min-height: 14px;
1164
+ }
1142
1165
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1143
1166
  margin: 0;
1144
1167
  }
@@ -1170,7 +1193,7 @@
1170
1193
  margin-left: 34px;
1171
1194
  }
1172
1195
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1173
- padding: 9px 8px 9px 12px;
1196
+ margin: 9px 8px 9px 12px;
1174
1197
  }
1175
1198
  .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon.e-icon-left)) {
1176
1199
  padding-left: 34px;
@@ -1194,7 +1217,7 @@
1194
1217
  margin-right: 34px;
1195
1218
  }
1196
1219
  .e-rtl.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1197
- padding: 9px 12px 9px 8px;
1220
+ margin: 9px 12px 9px 8px;
1198
1221
  }
1199
1222
  .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.e-icon-left)) {
1200
1223
  padding-right: 34px;
@@ -1263,6 +1286,11 @@
1263
1286
  font-size: 16px;
1264
1287
  font-weight: 400;
1265
1288
  line-height: 16px;
1289
+ min-height: 16px;
1290
+ min-width: 16px;
1291
+ background-repeat: no-repeat;
1292
+ background-size: contain;
1293
+ background-position: center;
1266
1294
  margin: 5px;
1267
1295
  width: auto;
1268
1296
  }
@@ -1370,6 +1398,10 @@
1370
1398
  line-height: 20px;
1371
1399
  padding: 3px;
1372
1400
  background-size: cover;
1401
+ min-width: 20px;
1402
+ min-height: 20px;
1403
+ background-position: center;
1404
+ background-repeat: no-repeat;
1373
1405
  }
1374
1406
  .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover, .e-ribbon-gallery-popup.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item.e-ribbon-gallery-selected,
1375
1407
  .e-ribbon-gallery-dropdown.e-popup .e-ribbon-gallery-container .e-ribbon-gallery-item:hover,
@@ -1421,6 +1453,11 @@
1421
1453
  border-radius: unset;
1422
1454
  }
1423
1455
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item .e-menu-icon, .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon {
1456
+ min-height: 14px;
1457
+ min-width: 14px;
1458
+ background-repeat: no-repeat;
1459
+ background-size: contain;
1460
+ background-position: center;
1424
1461
  width: auto;
1425
1462
  }
1426
1463
  .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon, .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon {
@@ -1437,6 +1474,11 @@
1437
1474
  .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1438
1475
  font-size: 16px;
1439
1476
  line-height: 16px;
1477
+ min-height: 16px;
1478
+ min-width: 16px;
1479
+ background-repeat: no-repeat;
1480
+ background-size: contain;
1481
+ background-position: center;
1440
1482
  }
1441
1483
 
1442
1484
  .e-ribbon-tooltip .e-tip-content {
@@ -1695,6 +1737,11 @@
1695
1737
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1696
1738
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1697
1739
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
1740
+ min-height: 32px;
1741
+ min-width: 32px;
1742
+ background-repeat: no-repeat;
1743
+ background-size: contain;
1744
+ background-position: center;
1698
1745
  font-size: 32px;
1699
1746
  padding: 8px 3px;
1700
1747
  }
@@ -1769,6 +1816,24 @@
1769
1816
  line-height: 20px;
1770
1817
  margin: 7px;
1771
1818
  }
1819
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret), .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1820
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1821
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1822
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1823
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1824
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1825
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1826
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1827
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1828
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1829
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1830
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1831
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1832
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1833
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret) {
1834
+ min-width: 20px;
1835
+ min-height: 20px;
1836
+ }
1772
1837
  .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-medium-item .e-split-colorpicker.e-split-btn, .e-bigger.e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-small-item .e-split-colorpicker.e-split-btn,
1773
1838
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-split-colorpicker.e-split-btn,
1774
1839
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-split-colorpicker.e-split-btn,
@@ -1874,6 +1939,11 @@
1874
1939
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1875
1940
  font-size: 20px;
1876
1941
  }
1942
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret),
1943
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret) {
1944
+ min-width: 20px;
1945
+ min-height: 20px;
1946
+ }
1877
1947
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1878
1948
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1879
1949
  margin: 0;
@@ -1913,7 +1983,7 @@
1913
1983
  }
1914
1984
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1915
1985
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1916
- padding: 11px 12px 11px 16px;
1986
+ margin: 11px 12px 11px 16px;
1917
1987
  }
1918
1988
  .e-bigger .e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon.e-icon-left)),
1919
1989
  .e-bigger.e-ribbon-group-overflow-ddb:not(.e-rtl) .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon.e-icon-left)) {
@@ -1942,7 +2012,7 @@
1942
2012
  }
1943
2013
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left,
1944
2014
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1945
- padding: 11px 16px 11px 12px;
2015
+ margin: 11px 16px 11px 12px;
1946
2016
  }
1947
2017
  .e-bigger .e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon.e-icon-left)),
1948
2018
  .e-bigger.e-ribbon-group-overflow-ddb.e-rtl .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item:not(:has(.e-colorpicker-wrapper)) .e-btn:not(:has(.e-btn-icon.e-icon-left)) {
@@ -1971,6 +2041,8 @@
1971
2041
  .e-bigger .e-ribbon-control.e-dropdown-popup ul .e-item .e-menu-icon {
1972
2042
  font-size: 20px;
1973
2043
  line-height: 20px;
2044
+ min-height: 20px;
2045
+ min-width: 20px;
1974
2046
  }
1975
2047
 
1976
2048
  .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item.e-blankicon,
@@ -1979,6 +2051,13 @@
1979
2051
  .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item.e-blankicon {
1980
2052
  padding-left: 38px !important; /* stylelint-disable-line declaration-no-important */
1981
2053
  }
2054
+ .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item .e-menu-icon,
2055
+ .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-vertical .e-menu-item .e-menu-icon,
2056
+ .e-bigger .e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon,
2057
+ .e-bigger.e-ribbon-menu.e-menu-wrapper ul.e-ul .e-menu-item .e-menu-icon {
2058
+ min-width: 18px;
2059
+ min-height: 18px;
2060
+ }
1982
2061
 
1983
2062
  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-btn {
1984
2063
  height: 48px;
@@ -2002,7 +2081,9 @@
2002
2081
  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-ul .e-menu-item:not(.e-separator) .e-menu-icon {
2003
2082
  font-size: 20px;
2004
2083
  line-height: 20px;
2005
- padding: 14px 16px;
2084
+ margin: 14px 16px 18px;
2085
+ min-width: 20px;
2086
+ min-height: 20px;
2006
2087
  }
2007
2088
  .e-bigger .e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:not(.e-separator).e-blankicon,
2008
2089
  .e-bigger.e-ribbon-backstage-popup .e-ribbon-backstage-wrapper .e-ribbon-backstage-menu.e-menu-wrapper ul.e-vertical .e-menu-item:not(.e-separator).e-blankicon,
@@ -2020,6 +2101,8 @@
2020
2101
  font-size: 20px;
2021
2102
  line-height: 20px;
2022
2103
  margin: 7px;
2104
+ min-height: 20px;
2105
+ min-width: 20px;
2023
2106
  }
2024
2107
  .e-bigger .e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn-icon.e-icon-left,
2025
2108
  .e-bigger.e-dropdown-popup.e-ribbon-dropdown-group-button .e-btn-group .e-btn-icon.e-icon-left {