@syncfusion/ej2-ribbon 26.2.4 → 26.2.7

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 +12 -12
  6. package/styles/bootstrap-dark.css +50 -4
  7. package/styles/bootstrap.css +50 -4
  8. package/styles/bootstrap4.css +50 -4
  9. package/styles/bootstrap5-dark.css +50 -4
  10. package/styles/bootstrap5.css +50 -4
  11. package/styles/fabric-dark.css +50 -4
  12. package/styles/fabric.css +50 -4
  13. package/styles/fluent-dark.css +50 -4
  14. package/styles/fluent.css +50 -4
  15. package/styles/fluent2.css +60 -14
  16. package/styles/highcontrast-light.css +50 -4
  17. package/styles/highcontrast.css +50 -4
  18. package/styles/material-dark.css +50 -4
  19. package/styles/material.css +50 -4
  20. package/styles/material3-dark.css +50 -4
  21. package/styles/material3.css +50 -4
  22. package/styles/ribbon/_bds-definition.scss +6 -0
  23. package/styles/ribbon/_bootstrap-dark-definition.scss +6 -0
  24. package/styles/ribbon/_bootstrap-definition.scss +6 -0
  25. package/styles/ribbon/_bootstrap4-definition.scss +6 -0
  26. package/styles/ribbon/_bootstrap5-definition.scss +6 -0
  27. package/styles/ribbon/_bootstrap5.3-definition.scss +6 -0
  28. package/styles/ribbon/_fabric-dark-definition.scss +6 -0
  29. package/styles/ribbon/_fabric-definition.scss +6 -0
  30. package/styles/ribbon/_fluent-definition.scss +6 -0
  31. package/styles/ribbon/_fluent2-definition.scss +6 -0
  32. package/styles/ribbon/_fusionnew-definition.scss +6 -0
  33. package/styles/ribbon/_highcontrast-definition.scss +6 -0
  34. package/styles/ribbon/_highcontrast-light-definition.scss +6 -0
  35. package/styles/ribbon/_layout.scss +32 -4
  36. package/styles/ribbon/_material-dark-definition.scss +6 -0
  37. package/styles/ribbon/_material-definition.scss +6 -0
  38. package/styles/ribbon/_material3-definition.scss +6 -0
  39. package/styles/ribbon/_tailwind-definition.scss +6 -0
  40. package/styles/ribbon/bootstrap-dark.css +50 -4
  41. package/styles/ribbon/bootstrap.css +50 -4
  42. package/styles/ribbon/bootstrap4.css +50 -4
  43. package/styles/ribbon/bootstrap5-dark.css +50 -4
  44. package/styles/ribbon/bootstrap5.css +50 -4
  45. package/styles/ribbon/fabric-dark.css +50 -4
  46. package/styles/ribbon/fabric.css +50 -4
  47. package/styles/ribbon/fluent-dark.css +50 -4
  48. package/styles/ribbon/fluent.css +50 -4
  49. package/styles/ribbon/fluent2.css +60 -14
  50. package/styles/ribbon/highcontrast-light.css +50 -4
  51. package/styles/ribbon/highcontrast.css +50 -4
  52. package/styles/ribbon/material-dark.css +50 -4
  53. package/styles/ribbon/material.css +50 -4
  54. package/styles/ribbon/material3-dark.css +50 -4
  55. package/styles/ribbon/material3.css +50 -4
  56. package/styles/ribbon/tailwind-dark.css +50 -4
  57. package/styles/ribbon/tailwind.css +50 -4
  58. package/styles/tailwind-dark.css +50 -4
  59. package/styles/tailwind.css +50 -4
package/styles/material3-dark.css CHANGED
@@ -900,6 +900,11 @@
900
900
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
901
901
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
902
902
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
903
+ min-height: 32px;
904
+ min-width: 32px;
905
+ background-repeat: no-repeat;
906
+ background-size: contain;
907
+ background-position: center;
903
908
  font-size: 32px;
904
909
  font-weight: 400;
905
910
  padding: 4px 3px;
@@ -1040,6 +1045,15 @@
1040
1045
  line-height: 16px;
1041
1046
  margin: 4px;
1042
1047
  }
1048
+ .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),
1049
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1050
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1051
+ min-height: 16px;
1052
+ min-width: 16px;
1053
+ background-repeat: no-repeat;
1054
+ background-size: contain;
1055
+ background-position: center;
1056
+ }
1043
1057
  .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,
1044
1058
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-colorpicker-wrapper .e-split-btn-wrapper,
1045
1059
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-colorpicker-wrapper .e-split-btn-wrapper {
@@ -1190,6 +1204,10 @@
1190
1204
  width: 100%;
1191
1205
  height: 32px;
1192
1206
  }
1207
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1208
+ min-width: 16px;
1209
+ min-height: 16px;
1210
+ }
1193
1211
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1194
1212
  margin: 0;
1195
1213
  }
@@ -1221,7 +1239,7 @@
1221
1239
  margin-left: 36px;
1222
1240
  }
1223
1241
  .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 {
1224
- padding: 8px 8px 8px 12px;
1242
+ margin: 8px 8px 8px 12px;
1225
1243
  }
1226
1244
  .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)) {
1227
1245
  padding-left: 36px;
@@ -1245,7 +1263,7 @@
1245
1263
  margin-right: 36px;
1246
1264
  }
1247
1265
  .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 {
1248
- padding: 8px 12px 8px 8px;
1266
+ margin: 8px 12px 8px 8px;
1249
1267
  }
1250
1268
  .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)) {
1251
1269
  padding-right: 36px;
@@ -1746,6 +1764,11 @@
1746
1764
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1747
1765
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1748
1766
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
1767
+ min-height: 36px;
1768
+ min-width: 36px;
1769
+ background-repeat: no-repeat;
1770
+ background-size: contain;
1771
+ background-position: center;
1749
1772
  font-size: 36px;
1750
1773
  padding: 8px 3px 4px;
1751
1774
  }
@@ -1820,6 +1843,24 @@
1820
1843
  line-height: 20px;
1821
1844
  margin: 8px;
1822
1845
  }
1846
+ .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),
1847
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1848
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1849
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1850
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1851
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1852
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1853
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1854
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1855
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1856
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1857
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1858
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1859
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1860
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret) {
1861
+ min-width: 20px;
1862
+ min-height: 20px;
1863
+ }
1823
1864
  .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,
1824
1865
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-split-colorpicker.e-split-btn,
1825
1866
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-split-colorpicker.e-split-btn,
@@ -1925,6 +1966,11 @@
1925
1966
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1926
1967
  font-size: 20px;
1927
1968
  }
1969
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret),
1970
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret) {
1971
+ min-width: 20px;
1972
+ min-height: 20px;
1973
+ }
1928
1974
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1929
1975
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1930
1976
  margin: 0;
@@ -1964,7 +2010,7 @@
1964
2010
  }
1965
2011
  .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,
1966
2012
  .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 {
1967
- padding: 10px 12px 10px 16px;
2013
+ margin: 10px 12px 10px 16px;
1968
2014
  }
1969
2015
  .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)),
1970
2016
  .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)) {
@@ -1993,7 +2039,7 @@
1993
2039
  }
1994
2040
  .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,
1995
2041
  .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 {
1996
- padding: 10px 16px 10px 12px;
2042
+ margin: 10px 16px 10px 12px;
1997
2043
  }
1998
2044
  .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)),
1999
2045
  .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)) {
package/styles/material3.css CHANGED
@@ -956,6 +956,11 @@
956
956
  .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
957
957
  .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
958
958
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
959
+ min-height: 32px;
960
+ min-width: 32px;
961
+ background-repeat: no-repeat;
962
+ background-size: contain;
963
+ background-position: center;
959
964
  font-size: 32px;
960
965
  font-weight: 400;
961
966
  padding: 4px 3px;
@@ -1096,6 +1101,15 @@
1096
1101
  line-height: 16px;
1097
1102
  margin: 4px;
1098
1103
  }
1104
+ .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),
1105
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1106
+ .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1107
+ min-height: 16px;
1108
+ min-width: 16px;
1109
+ background-repeat: no-repeat;
1110
+ background-size: contain;
1111
+ background-position: center;
1112
+ }
1099
1113
  .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,
1100
1114
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-colorpicker-wrapper .e-split-btn-wrapper,
1101
1115
  .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-colorpicker-wrapper .e-split-btn-wrapper {
@@ -1246,6 +1260,10 @@
1246
1260
  width: 100%;
1247
1261
  height: 32px;
1248
1262
  }
1263
+ .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret) {
1264
+ min-width: 16px;
1265
+ min-height: 16px;
1266
+ }
1249
1267
  .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon.e-icon-left {
1250
1268
  margin: 0;
1251
1269
  }
@@ -1277,7 +1295,7 @@
1277
1295
  margin-left: 36px;
1278
1296
  }
1279
1297
  .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 {
1280
- padding: 8px 8px 8px 12px;
1298
+ margin: 8px 8px 8px 12px;
1281
1299
  }
1282
1300
  .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)) {
1283
1301
  padding-left: 36px;
@@ -1301,7 +1319,7 @@
1301
1319
  margin-right: 36px;
1302
1320
  }
1303
1321
  .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 {
1304
- padding: 8px 12px 8px 8px;
1322
+ margin: 8px 12px 8px 8px;
1305
1323
  }
1306
1324
  .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)) {
1307
1325
  padding-right: 36px;
@@ -1802,6 +1820,11 @@
1802
1820
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1803
1821
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret),
1804
1822
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-large-item .e-btn .e-btn-icon:not(.e-caret) {
1823
+ min-height: 36px;
1824
+ min-width: 36px;
1825
+ background-repeat: no-repeat;
1826
+ background-size: contain;
1827
+ background-position: center;
1805
1828
  font-size: 36px;
1806
1829
  padding: 8px 3px 4px;
1807
1830
  }
@@ -1876,6 +1899,24 @@
1876
1899
  line-height: 20px;
1877
1900
  margin: 8px;
1878
1901
  }
1902
+ .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),
1903
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1904
+ .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1905
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1906
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1907
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1908
+ .e-bigger .e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1909
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1910
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1911
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1912
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1913
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1914
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-group-overflow.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret),
1915
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-medium-item .e-btn .e-btn-icon:not(.e-caret),
1916
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-item.e-ribbon-small-item .e-btn .e-btn-icon:not(.e-caret) {
1917
+ min-width: 20px;
1918
+ min-height: 20px;
1919
+ }
1879
1920
  .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,
1880
1921
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-medium-item .e-split-colorpicker.e-split-btn,
1881
1922
  .e-bigger.e-ribbon.e-rbn .e-ribbon-item.e-ribbon-small-item .e-split-colorpicker.e-split-btn,
@@ -1981,6 +2022,11 @@
1981
2022
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon {
1982
2023
  font-size: 20px;
1983
2024
  }
2025
+ .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret),
2026
+ .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon:not(.e-caret) {
2027
+ min-width: 20px;
2028
+ min-height: 20px;
2029
+ }
1984
2030
  .e-bigger .e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left,
1985
2031
  .e-bigger.e-ribbon-group-overflow-ddb .e-ribbon-overflow-target .e-ribbon-item .e-btn .e-btn-icon.e-icon-left {
1986
2032
  margin: 0;
@@ -2020,7 +2066,7 @@
2020
2066
  }
2021
2067
  .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,
2022
2068
  .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 {
2023
- padding: 10px 12px 10px 16px;
2069
+ margin: 10px 12px 10px 16px;
2024
2070
  }
2025
2071
  .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)),
2026
2072
  .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)) {
@@ -2049,7 +2095,7 @@
2049
2095
  }
2050
2096
  .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,
2051
2097
  .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 {
2052
- padding: 10px 16px 10px 12px;
2098
+ margin: 10px 16px 10px 12px;
2053
2099
  }
2054
2100
  .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)),
2055
2101
  .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)) {
package/styles/ribbon/_bds-definition.scss CHANGED
@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 18px !default;
60
60
  $ribbon-large-items-icon-size: $text-2xl !default;
61
61
  $ribbon-large-items-max-width: 10ch !default;
62
62
  $ribbon-large-items-btn-gap: 4px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: $font-weight-normal !default;
66
67
  $ribbon-items-btn-size: $text-xs !default;
67
68
  $ribbon-items-label-size: $text-sm !default;
68
69
  $ribbon-items-btn-icon-size : $text-base !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-sm !default;
70
72
  $ribbon-items-margin: 5px !default;
71
73
  $ribbon-items-height: 18px !default;
74
+ $ribbon-items-min-width-height: 16px !default;
72
75
  $ribbon-checkbox-margin: 8px 0 8px 12px !default;
73
76
  $ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
74
77
  $ribbon-items-checkbox-size: $text-xs !default;
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-gap: 8px !default;
207
210
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
208
211
  $ribbon-bigger-large-items-btn-height: 125% !default;
212
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
213
+ $ribbon-bigger-items-min-width-height: $text-xl;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: $text-sm !default;
211
216
  $ribbon-bigger-items-height: 125% !default;
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-xl !default;
215
220
  $ribbon-bigger-items-margin: 7px !default;
216
221
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
222
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
217
223
  $ribbon-bigger-items-checkbox-size: $text-sm !default;
218
224
  $ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
219
225
  $ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
package/styles/ribbon/_bootstrap-dark-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 32px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 2px !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: 12px !default;
67
68
  $ribbon-items-label-size: 12px !default;
68
69
  $ribbon-items-btn-icon-size: 16px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: 12px !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: 12px !default;
75
78
  $ribbon-items-checkbox-padding: 0 8px !default;
76
79
  $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
206
209
  $ribbon-bigger-large-items-btn-size: 14px !default;
207
210
  $ribbon-bigger-large-items-btn-height: 22px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 40px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: 20px !default;
215
220
  $ribbon-bigger-items-btn-icon-size: 18px !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 10px !default;
217
223
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
package/styles/ribbon/_bootstrap-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 32px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: 12px !default;
67
68
  $ribbon-items-label-size: 12px !default;
68
69
  $ribbon-items-btn-icon-size: 16px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: 12px !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: 12px !default;
75
78
  $ribbon-items-checkbox-padding: 0 8px !default;
76
79
  $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: 14px !default;
207
210
  $ribbon-bigger-large-items-btn-height: 22px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 40px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 9px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: 20px !default;
215
220
  $ribbon-bigger-items-btn-icon-size: 18px !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 10px !default;
217
223
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
package/styles/ribbon/_bootstrap4-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 8px 5px 6px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 32px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: 14px !default;
67
68
  $ribbon-items-label-size: 14px !default;
68
69
  $ribbon-items-btn-icon-size: 16px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: 12px !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
73
75
  $ribbon-items-height: 22px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: 14px !default;
75
78
  $ribbon-items-checkbox-padding: 0 8px !default;
76
79
  $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 3px !default;
206
209
  $ribbon-bigger-large-items-btn-size: 16px !default;
207
210
  $ribbon-bigger-large-items-btn-height: 24px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 40px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 6px !default;
209
214
  $ribbon-bigger-items-padding: 1px !default;
210
215
  $ribbon-bigger-items-btn-size: 16px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 24px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: 20px !default;
215
220
  $ribbon-bigger-items-btn-icon-size: 18px !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 9px !default;
217
223
  $ribbon-bigger-checkbox-margin: 7px 0 7px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 7px 16px 7px 0 !default;
package/styles/ribbon/_bootstrap5-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: $text-2xl !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 8px 6px 4px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: $text-xs !default;
67
68
  $ribbon-items-label-size: $text-sm !default;
68
69
  $ribbon-items-btn-icon-size: $text-base !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-base !default;
70
72
  $ribbon-items-margin: 5px !default;
71
73
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: $text-xs !default;
75
78
  $ribbon-items-checkbox-padding: 0 5px !default;
76
79
  $ribbon-input-group-height: 26px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
207
210
  $ribbon-bigger-large-items-btn-height: 18px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 18px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-xl !default;
215
220
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 7px !default;
217
223
  $ribbon-bigger-checkbox-margin: 7px 0 7px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 7px 16px 7px 0 !default;
package/styles/ribbon/_bootstrap5.3-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: $text-2xl !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 8px 6px 4px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: $text-xs !default;
67
68
  $ribbon-items-label-size: $text-sm !default;
68
69
  $ribbon-items-btn-icon-size: $text-base !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-base !default;
70
72
  $ribbon-items-margin: 5px !default;
71
73
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: $text-xs !default;
75
78
  $ribbon-items-checkbox-padding: 0 5px !default;
76
79
  $ribbon-input-group-height: 26px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 32px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
207
210
  $ribbon-bigger-large-items-btn-height: 18px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
212
+ $ribbon-bigger-items-min-width-height: $text-xl;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 18px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-xl !default;
215
220
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 7px !default;
217
223
  $ribbon-bigger-checkbox-margin: 7px 0 7px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 7px 16px 7px 0 !default;
package/styles/ribbon/_fabric-dark-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 12px 7px 4px !default;
62
62
  $ribbon-large-items-btn-gap: 6px !default;
63
+ $ribbon-large-items-min-width-height: 32px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: unset !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: 12px !default;
67
68
  $ribbon-items-label-size: 14px !default;
68
69
  $ribbon-items-btn-icon-size: 14px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: 14px !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: 12px !default;
75
78
  $ribbon-items-checkbox-padding: 0 8px !default;
76
79
  $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: 14px !default;
207
210
  $ribbon-bigger-large-items-btn-height: 22px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: 20px !default;
215
220
  $ribbon-bigger-items-btn-icon-size: 18px !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 10px !default;
217
223
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
package/styles/ribbon/_fabric-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-icon-size: 32px !default;
60
60
  $ribbon-large-items-max-width: 10ch !default;
61
61
  $ribbon-large-items-icon-padding: 12px 5px 4px !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 32px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: unset !default;
65
66
  $ribbon-items-font-weight: 400 !default;
66
67
  $ribbon-items-btn-size: 14px !default;
67
68
  $ribbon-items-label-size: 14px !default;
68
69
  $ribbon-items-btn-icon-size: 14px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: 14px !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
73
75
  $ribbon-items-height: 22px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: 14px !default;
75
78
  $ribbon-items-checkbox-padding: 0 8px !default;
76
79
  $ribbon-input-group-height: 32px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
206
209
  $ribbon-bigger-large-items-btn-size: 14px !default;
207
210
  $ribbon-bigger-large-items-btn-height: 22px !default;
211
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 9px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 22px !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: 20px !default;
215
220
  $ribbon-bigger-items-btn-icon-size: 18px !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 10px !default;
217
223
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
package/styles/ribbon/_fluent-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-btn-height: 18px !default;
60
60
  $ribbon-large-items-icon-size: $text-2xl !default;
61
61
  $ribbon-large-items-max-width: 10ch !default;
62
62
  $ribbon-large-items-btn-gap: 4px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 2px !default;
65
66
  $ribbon-items-font-weight: $font-weight-normal !default;
66
67
  $ribbon-items-btn-size: $text-xs !default;
67
68
  $ribbon-items-label-size: $text-sm !default;
68
69
  $ribbon-items-btn-icon-size: $text-sm !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-sm !default;
70
72
  $ribbon-items-margin: 5px !default;
71
73
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
72
74
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: $text-xs !default;
75
78
  $ribbon-items-checkbox-padding: 0 5px !default;
76
79
  $ribbon-input-group-height: 26px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
207
210
  $ribbon-bigger-large-items-btn-height: 125% !default;
211
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 125% !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-xl !default;
215
220
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 7px !default;
217
223
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
package/styles/ribbon/_fluent2-definition.scss CHANGED
@@ -60,15 +60,18 @@ $ribbon-large-items-btn-height: 16px !default;
60
60
  $ribbon-large-items-icon-size: $text-2xl !default;
61
61
  $ribbon-large-items-max-width: 11ch !default;
62
62
  $ribbon-large-items-btn-gap: 4px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 4px !default;
65
66
  $ribbon-items-font-weight: $font-weight-normal !default;
66
67
  $ribbon-items-btn-size: $text-sm !default;
67
68
  $ribbon-items-label-size: $text-sm !default;
68
69
  $ribbon-items-btn-icon-size : $text-base !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-sm !default;
70
72
  $ribbon-items-margin: 8px !default;
71
73
  $ribbon-items-height: 20px !default;
74
+ $ribbon-items-min-width-height: 16px !default;
72
75
  $ribbon-checkbox-margin: 8px 0 8px 8px !default;
73
76
  $ribbon-rtl-checkbox-margin: 8px 8px 8px 0 !default;
74
77
  $ribbon-items-checkbox-size: $text-sm !default;
@@ -206,6 +209,8 @@ $ribbon-bigger-large-items-btn-padding: 0 12px !default;
206
209
  $ribbon-bigger-large-items-btn-gap: 8px !default;
207
210
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
208
211
  $ribbon-bigger-large-items-btn-height: 20px !default;
212
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
213
+ $ribbon-bigger-items-min-width-height: 18px;
209
214
  $ribbon-bigger-items-padding: 0 !default;
210
215
  $ribbon-bigger-items-btn-size: $text-base !default;
211
216
  $ribbon-bigger-items-height: 22px !default;
@@ -214,6 +219,7 @@ $ribbon-bigger-items-icon-height: 18px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-lg !default;
215
220
  $ribbon-bigger-items-margin: 11px !default;
216
221
  $ribbon-bigger-items-btn-icon-size: $text-base !default;
222
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
217
223
  $ribbon-bigger-items-checkbox-size: $text-base !default;
218
224
  $ribbon-bigger-checkbox-margin: 8px 0 8px 6px !default;
219
225
  $ribbon-bigger-rtl-checkbox-margin: 8px 6px 8px 0 !default;
package/styles/ribbon/_fusionnew-definition.scss CHANGED
@@ -60,17 +60,20 @@ $ribbon-large-items-btn-height: 18px !default;
60
60
  $ribbon-large-items-icon-size: $text-2xl !default;
61
61
  $ribbon-large-items-max-width: 10ch !default;
62
62
  $ribbon-large-items-btn-gap: 5px !default;
63
+ $ribbon-large-items-min-width-height: 24px !default;
63
64
  $ribbon-items-border: none !default;
64
65
  $ribbon-items-border-radius: 2px !default;
65
66
  $ribbon-items-font-weight: $font-weight-normal !default;
66
67
  $ribbon-items-btn-size: $text-xs !default;
67
68
  $ribbon-items-label-size: $text-xs !default;
68
69
  $ribbon-items-btn-icon-size: 16px !default;
70
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
69
71
  $ribbon-items-caret-icon-size: $text-sm !default;
70
72
  $ribbon-items-margin: 5px !default;
71
73
  $ribbon-checkbox-margin: 4px !default;
72
74
  $ribbon-rtl-checkbox-margin: 4px !default;
73
75
  $ribbon-items-height: 18px !default;
76
+ $ribbon-items-min-width-height: 16px !default;
74
77
  $ribbon-items-checkbox-size: $text-xs !default;
75
78
  $ribbon-items-checkbox-padding: 0 5px !default;
76
79
  $ribbon-input-group-height: 26px !default;
@@ -205,6 +208,8 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
205
208
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
206
209
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
207
210
  $ribbon-bigger-large-items-btn-height: 125% !default;
211
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
212
+ $ribbon-bigger-items-min-width-height: 20px;
208
213
  $ribbon-bigger-large-items-btn-gap: 8px !default;
209
214
  $ribbon-bigger-items-padding: 2px !default;
210
215
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -213,6 +218,7 @@ $ribbon-bigger-items-height: 125% !default;
213
218
  $ribbon-bigger-items-icon-height: 20px !default;
214
219
  $ribbon-bigger-items-icon-size: $text-xl !default;
215
220
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
221
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
216
222
  $ribbon-bigger-items-margin: 7px !default;
217
223
  $ribbon-bigger-checkbox-margin: 8px !default;
218
224
  $ribbon-bigger-rtl-checkbox-margin: 8px !default;