@syncfusion/blazor-themes 26.2.4 → 26.2.5

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 (61) hide show
  1. package/SCSS-Themes/bds-dark.scss +40 -6
  2. package/SCSS-Themes/bds.scss +40 -6
  3. package/SCSS-Themes/bootstrap-dark.scss +40 -6
  4. package/SCSS-Themes/bootstrap.scss +40 -6
  5. package/SCSS-Themes/bootstrap4.scss +40 -6
  6. package/SCSS-Themes/bootstrap5-dark.scss +40 -6
  7. package/SCSS-Themes/bootstrap5.scss +40 -6
  8. package/SCSS-Themes/fabric-dark.scss +40 -6
  9. package/SCSS-Themes/fabric.scss +40 -6
  10. package/SCSS-Themes/fluent-dark.scss +40 -6
  11. package/SCSS-Themes/fluent.scss +40 -6
  12. package/SCSS-Themes/fluent2-dark.scss +40 -6
  13. package/SCSS-Themes/fluent2.scss +40 -6
  14. package/SCSS-Themes/highcontrast.scss +40 -6
  15. package/SCSS-Themes/material-dark.scss +40 -6
  16. package/SCSS-Themes/material.scss +40 -6
  17. package/SCSS-Themes/material3-dark.scss +40 -6
  18. package/SCSS-Themes/material3.scss +40 -6
  19. package/SCSS-Themes/navigations/treeview/bds-dark.scss +2 -2
  20. package/SCSS-Themes/navigations/treeview/bds.scss +2 -2
  21. package/SCSS-Themes/navigations/treeview/bootstrap-dark.scss +2 -2
  22. package/SCSS-Themes/navigations/treeview/bootstrap.scss +2 -2
  23. package/SCSS-Themes/navigations/treeview/bootstrap4.scss +2 -2
  24. package/SCSS-Themes/navigations/treeview/bootstrap5-dark.scss +2 -2
  25. package/SCSS-Themes/navigations/treeview/bootstrap5.scss +2 -2
  26. package/SCSS-Themes/navigations/treeview/fabric-dark.scss +2 -2
  27. package/SCSS-Themes/navigations/treeview/fabric.scss +2 -2
  28. package/SCSS-Themes/navigations/treeview/fluent-dark.scss +2 -2
  29. package/SCSS-Themes/navigations/treeview/fluent.scss +2 -2
  30. package/SCSS-Themes/navigations/treeview/fluent2-dark.scss +2 -2
  31. package/SCSS-Themes/navigations/treeview/fluent2.scss +2 -2
  32. package/SCSS-Themes/navigations/treeview/highcontrast.scss +2 -2
  33. package/SCSS-Themes/navigations/treeview/material-dark.scss +2 -2
  34. package/SCSS-Themes/navigations/treeview/material.scss +2 -2
  35. package/SCSS-Themes/navigations/treeview/material3-dark.scss +2 -2
  36. package/SCSS-Themes/navigations/treeview/material3.scss +2 -2
  37. package/SCSS-Themes/navigations/treeview/tailwind-dark.scss +2 -2
  38. package/SCSS-Themes/navigations/treeview/tailwind.scss +2 -2
  39. package/SCSS-Themes/ribbon/ribbon/bds-dark.scss +38 -4
  40. package/SCSS-Themes/ribbon/ribbon/bds.scss +38 -4
  41. package/SCSS-Themes/ribbon/ribbon/bootstrap-dark.scss +38 -4
  42. package/SCSS-Themes/ribbon/ribbon/bootstrap.scss +38 -4
  43. package/SCSS-Themes/ribbon/ribbon/bootstrap4.scss +38 -4
  44. package/SCSS-Themes/ribbon/ribbon/bootstrap5-dark.scss +38 -4
  45. package/SCSS-Themes/ribbon/ribbon/bootstrap5.scss +38 -4
  46. package/SCSS-Themes/ribbon/ribbon/fabric-dark.scss +38 -4
  47. package/SCSS-Themes/ribbon/ribbon/fabric.scss +38 -4
  48. package/SCSS-Themes/ribbon/ribbon/fluent-dark.scss +38 -4
  49. package/SCSS-Themes/ribbon/ribbon/fluent.scss +38 -4
  50. package/SCSS-Themes/ribbon/ribbon/fluent2-dark.scss +38 -4
  51. package/SCSS-Themes/ribbon/ribbon/fluent2.scss +38 -4
  52. package/SCSS-Themes/ribbon/ribbon/highcontrast.scss +38 -4
  53. package/SCSS-Themes/ribbon/ribbon/material-dark.scss +38 -4
  54. package/SCSS-Themes/ribbon/ribbon/material.scss +38 -4
  55. package/SCSS-Themes/ribbon/ribbon/material3-dark.scss +38 -4
  56. package/SCSS-Themes/ribbon/ribbon/material3.scss +38 -4
  57. package/SCSS-Themes/ribbon/ribbon/tailwind-dark.scss +38 -4
  58. package/SCSS-Themes/ribbon/ribbon/tailwind.scss +38 -4
  59. package/SCSS-Themes/tailwind-dark.scss +40 -6
  60. package/SCSS-Themes/tailwind.scss +40 -6
  61. package/package.json +1 -1
@@ -57296,8 +57296,8 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
57296
57296
 
57297
57297
  .e-list-item {
57298
57298
 
57299
- div.e-icons.e-icon-expandable::before,
57300
- div.e-icons.e-icon-collapsible::before {
57299
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
57300
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
57301
57301
  content: '\e75c';
57302
57302
  }
57303
57303
  }
@@ -127809,15 +127809,18 @@ $ribbon-large-items-btn-height: 16px !default;
127809
127809
  $ribbon-large-items-icon-size: $text-2xl !default;
127810
127810
  $ribbon-large-items-max-width: 11ch !default;
127811
127811
  $ribbon-large-items-btn-gap: 4px !default;
127812
+ $ribbon-large-items-min-width-height: 24px !default;
127812
127813
  $ribbon-items-border: none !default;
127813
127814
  $ribbon-items-border-radius: 4px !default;
127814
127815
  $ribbon-items-font-weight: $font-weight-normal !default;
127815
127816
  $ribbon-items-btn-size: $text-sm !default;
127816
127817
  $ribbon-items-label-size: $text-sm !default;
127817
127818
  $ribbon-items-btn-icon-size : $text-base !default;
127819
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
127818
127820
  $ribbon-items-caret-icon-size: $text-sm !default;
127819
127821
  $ribbon-items-margin: 8px !default;
127820
127822
  $ribbon-items-height: 20px !default;
127823
+ $ribbon-items-min-width-height: 16px !default;
127821
127824
  $ribbon-checkbox-margin: 8px 0 8px 8px !default;
127822
127825
  $ribbon-rtl-checkbox-margin: 8px 8px 8px 0 !default;
127823
127826
  $ribbon-items-checkbox-size: $text-sm !default;
@@ -127955,6 +127958,8 @@ $ribbon-bigger-large-items-btn-padding: 0 12px !default;
127955
127958
  $ribbon-bigger-large-items-btn-gap: 8px !default;
127956
127959
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
127957
127960
  $ribbon-bigger-large-items-btn-height: 20px !default;
127961
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
127962
+ $ribbon-bigger-items-min-width-height: 18px;
127958
127963
  $ribbon-bigger-items-padding: 0 !default;
127959
127964
  $ribbon-bigger-items-btn-size: $text-base !default;
127960
127965
  $ribbon-bigger-items-height: 22px !default;
@@ -127963,6 +127968,7 @@ $ribbon-bigger-items-icon-height: 18px !default;
127963
127968
  $ribbon-bigger-items-icon-size: $text-lg !default;
127964
127969
  $ribbon-bigger-items-margin: 11px !default;
127965
127970
  $ribbon-bigger-items-btn-icon-size: $text-base !default;
127971
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
127966
127972
  $ribbon-bigger-items-checkbox-size: $text-base !default;
127967
127973
  $ribbon-bigger-checkbox-margin: 8px 0 8px 6px !default;
127968
127974
  $ribbon-bigger-rtl-checkbox-margin: 8px 6px 8px 0 !default;
@@ -128180,6 +128186,14 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128180
128186
  line-height: $line-height;
128181
128187
  }
128182
128188
 
128189
+ @mixin ribbon-items-icon-images($items-size) {
128190
+ min-height: $items-size;
128191
+ min-width: $items-size;
128192
+ background-repeat: no-repeat;
128193
+ background-size: contain;
128194
+ background-position: center;
128195
+ }
128196
+
128183
128197
  @mixin ribbon-font-props($font-size, $line-height) {
128184
128198
  font-size: $font-size;
128185
128199
  line-height: $line-height;
@@ -128848,6 +128862,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128848
128862
  }
128849
128863
 
128850
128864
  .e-btn-icon:not(.e-caret) {
128865
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
128851
128866
  font-size: $ribbon-large-items-icon-size;
128852
128867
  font-weight: $ribbon-items-font-weight;
128853
128868
  padding: $ribbon-large-items-icon-padding;
@@ -128966,6 +128981,9 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128966
128981
  .e-btn-icon {
128967
128982
  @include ribbon-font-props(16px, 16px);
128968
128983
  margin: $ribbon-items-margin;
128984
+ &:not(.e-caret) {
128985
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
128986
+ }
128969
128987
  }
128970
128988
  }
128971
128989
 
@@ -129107,6 +129125,13 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129107
129125
  width: 100%;
129108
129126
  height: $ribbon-medium-item-height;
129109
129127
 
129128
+ .e-btn .e-btn-icon {
129129
+ &:not(.e-caret) {
129130
+ min-width: $ribbon-overflow-items-min-width-height;
129131
+ min-height: $ribbon-overflow-items-min-width-height;
129132
+ }
129133
+ }
129134
+
129110
129135
  .e-btn .e-btn-icon.e-icon-left {
129111
129136
  margin: 0;
129112
129137
  }
@@ -129145,7 +129170,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129145
129170
 
129146
129171
  &.e-ribbon-medium-item {
129147
129172
  .e-btn .e-btn-icon.e-icon-left {
129148
- padding: $ribbon-button-icon-padding;
129173
+ margin: $ribbon-button-icon-padding;
129149
129174
  }
129150
129175
 
129151
129176
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -129184,7 +129209,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129184
129209
 
129185
129210
  &.e-ribbon-medium-item {
129186
129211
  .e-btn .e-btn-icon.e-icon-left {
129187
- padding: $ribbon-rtl-button-icon-padding;
129212
+ margin: $ribbon-rtl-button-icon-padding;
129188
129213
  }
129189
129214
 
129190
129215
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -129636,6 +129661,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129636
129661
  max-width: $ribbon-bigger-large-items-max-width;
129637
129662
 
129638
129663
  .e-btn-icon:not(.e-caret) {
129664
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
129639
129665
  font-size: $ribbon-bigger-large-items-icon-size;
129640
129666
  padding: $ribbon-bigger-large-items-icon-padding;
129641
129667
  }
@@ -129666,6 +129692,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129666
129692
  .e-btn-icon {
129667
129693
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
129668
129694
  margin: $ribbon-bigger-items-margin;
129695
+ &:not(.e-caret) {
129696
+ min-width: $ribbon-bigger-items-min-width-height;
129697
+ min-height: $ribbon-bigger-items-min-width-height;
129698
+ }
129669
129699
  }
129670
129700
  }
129671
129701
 
@@ -129722,6 +129752,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129722
129752
  }
129723
129753
  .e-btn .e-btn-icon {
129724
129754
  font-size: $ribbon-bigger-items-btn-icon-size;
129755
+ &:not(.e-caret) {
129756
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
129757
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
129758
+ }
129725
129759
  &.e-icon-left {
129726
129760
  margin: 0;
129727
129761
  }
@@ -129758,7 +129792,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129758
129792
 
129759
129793
  &.e-ribbon-medium-item {
129760
129794
  .e-btn .e-btn-icon.e-icon-left {
129761
- padding: $ribbon-bigger-button-icon-padding;
129795
+ margin: $ribbon-bigger-button-icon-padding;
129762
129796
  }
129763
129797
 
129764
129798
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -129794,7 +129828,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129794
129828
 
129795
129829
  &.e-ribbon-medium-item {
129796
129830
  .e-btn .e-btn-icon.e-icon-left {
129797
- padding: $ribbon-bigger-rtl-button-icon-padding;
129831
+ margin: $ribbon-bigger-rtl-button-icon-padding;
129798
129832
  }
129799
129833
 
129800
129834
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -54590,8 +54590,8 @@ $ripple-width: 32px !default;
54590
54590
 
54591
54591
  .e-list-item {
54592
54592
 
54593
- div.e-icons.e-icon-expandable::before,
54594
- div.e-icons.e-icon-collapsible::before {
54593
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54594
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54595
54595
  content: '\e22e';
54596
54596
  }
54597
54597
  }
@@ -124285,17 +124285,20 @@ $ribbon-large-items-icon-size: 32px !default;
124285
124285
  $ribbon-large-items-max-width: 10ch !default;
124286
124286
  $ribbon-large-items-icon-padding: 12px 10px 4px !default;
124287
124287
  $ribbon-large-items-btn-gap: 8px !default;
124288
+ $ribbon-large-items-min-width-height: 32px !default;
124288
124289
  $ribbon-items-border: 2px solid !default;
124289
124290
  $ribbon-items-border-radius: unset !default;
124290
124291
  $ribbon-items-font-weight: 400 !default;
124291
124292
  $ribbon-items-btn-size: 14px !default;
124292
124293
  $ribbon-items-label-size: 14px !default;
124293
124294
  $ribbon-items-btn-icon-size: 14px !default;
124295
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124294
124296
  $ribbon-items-caret-icon-size: 14px !default;
124295
124297
  $ribbon-items-margin: 10px !default;
124296
124298
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
124297
124299
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
124298
124300
  $ribbon-items-height: 22px !default;
124301
+ $ribbon-items-min-width-height: 16px !default;
124299
124302
  $ribbon-items-checkbox-size: 14px !default;
124300
124303
  $ribbon-items-checkbox-padding: 0 10px !default;
124301
124304
  $ribbon-input-group-height: 36px !default;
@@ -124430,6 +124433,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
124430
124433
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
124431
124434
  $ribbon-bigger-large-items-btn-size: 16px !default;
124432
124435
  $ribbon-bigger-large-items-btn-height: 24px !default;
124436
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
124437
+ $ribbon-bigger-items-min-width-height: 20px;
124433
124438
  $ribbon-bigger-large-items-btn-gap: 8px !default;
124434
124439
  $ribbon-bigger-items-padding: 2px !default;
124435
124440
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -124438,6 +124443,7 @@ $ribbon-bigger-items-height: 22px !default;
124438
124443
  $ribbon-bigger-items-icon-height: 20px !default;
124439
124444
  $ribbon-bigger-items-icon-size: 20px !default;
124440
124445
  $ribbon-bigger-items-btn-icon-size: 18px !default;
124446
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124441
124447
  $ribbon-bigger-items-margin: 10px !default;
124442
124448
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124443
124449
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -124656,6 +124662,14 @@ $ribbon-items-focus-box-shadow: none !default;
124656
124662
  line-height: $line-height;
124657
124663
  }
124658
124664
 
124665
+ @mixin ribbon-items-icon-images($items-size) {
124666
+ min-height: $items-size;
124667
+ min-width: $items-size;
124668
+ background-repeat: no-repeat;
124669
+ background-size: contain;
124670
+ background-position: center;
124671
+ }
124672
+
124659
124673
  @mixin ribbon-font-props($font-size, $line-height) {
124660
124674
  font-size: $font-size;
124661
124675
  line-height: $line-height;
@@ -125324,6 +125338,7 @@ $ribbon-items-focus-box-shadow: none !default;
125324
125338
  }
125325
125339
 
125326
125340
  .e-btn-icon:not(.e-caret) {
125341
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125327
125342
  font-size: $ribbon-large-items-icon-size;
125328
125343
  font-weight: $ribbon-items-font-weight;
125329
125344
  padding: $ribbon-large-items-icon-padding;
@@ -125442,6 +125457,9 @@ $ribbon-items-focus-box-shadow: none !default;
125442
125457
  .e-btn-icon {
125443
125458
  @include ribbon-font-props(16px, 16px);
125444
125459
  margin: $ribbon-items-margin;
125460
+ &:not(.e-caret) {
125461
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125462
+ }
125445
125463
  }
125446
125464
  }
125447
125465
 
@@ -125583,6 +125601,13 @@ $ribbon-items-focus-box-shadow: none !default;
125583
125601
  width: 100%;
125584
125602
  height: $ribbon-medium-item-height;
125585
125603
 
125604
+ .e-btn .e-btn-icon {
125605
+ &:not(.e-caret) {
125606
+ min-width: $ribbon-overflow-items-min-width-height;
125607
+ min-height: $ribbon-overflow-items-min-width-height;
125608
+ }
125609
+ }
125610
+
125586
125611
  .e-btn .e-btn-icon.e-icon-left {
125587
125612
  margin: 0;
125588
125613
  }
@@ -125621,7 +125646,7 @@ $ribbon-items-focus-box-shadow: none !default;
125621
125646
 
125622
125647
  &.e-ribbon-medium-item {
125623
125648
  .e-btn .e-btn-icon.e-icon-left {
125624
- padding: $ribbon-button-icon-padding;
125649
+ margin: $ribbon-button-icon-padding;
125625
125650
  }
125626
125651
 
125627
125652
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -125660,7 +125685,7 @@ $ribbon-items-focus-box-shadow: none !default;
125660
125685
 
125661
125686
  &.e-ribbon-medium-item {
125662
125687
  .e-btn .e-btn-icon.e-icon-left {
125663
- padding: $ribbon-rtl-button-icon-padding;
125688
+ margin: $ribbon-rtl-button-icon-padding;
125664
125689
  }
125665
125690
 
125666
125691
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126112,6 +126137,7 @@ $ribbon-items-focus-box-shadow: none !default;
126112
126137
  max-width: $ribbon-bigger-large-items-max-width;
126113
126138
 
126114
126139
  .e-btn-icon:not(.e-caret) {
126140
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
126115
126141
  font-size: $ribbon-bigger-large-items-icon-size;
126116
126142
  padding: $ribbon-bigger-large-items-icon-padding;
126117
126143
  }
@@ -126142,6 +126168,10 @@ $ribbon-items-focus-box-shadow: none !default;
126142
126168
  .e-btn-icon {
126143
126169
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
126144
126170
  margin: $ribbon-bigger-items-margin;
126171
+ &:not(.e-caret) {
126172
+ min-width: $ribbon-bigger-items-min-width-height;
126173
+ min-height: $ribbon-bigger-items-min-width-height;
126174
+ }
126145
126175
  }
126146
126176
  }
126147
126177
 
@@ -126198,6 +126228,10 @@ $ribbon-items-focus-box-shadow: none !default;
126198
126228
  }
126199
126229
  .e-btn .e-btn-icon {
126200
126230
  font-size: $ribbon-bigger-items-btn-icon-size;
126231
+ &:not(.e-caret) {
126232
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126233
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126234
+ }
126201
126235
  &.e-icon-left {
126202
126236
  margin: 0;
126203
126237
  }
@@ -126234,7 +126268,7 @@ $ribbon-items-focus-box-shadow: none !default;
126234
126268
 
126235
126269
  &.e-ribbon-medium-item {
126236
126270
  .e-btn .e-btn-icon.e-icon-left {
126237
- padding: $ribbon-bigger-button-icon-padding;
126271
+ margin: $ribbon-bigger-button-icon-padding;
126238
126272
  }
126239
126273
 
126240
126274
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126270,7 +126304,7 @@ $ribbon-items-focus-box-shadow: none !default;
126270
126304
 
126271
126305
  &.e-ribbon-medium-item {
126272
126306
  .e-btn .e-btn-icon.e-icon-left {
126273
- padding: $ribbon-bigger-rtl-button-icon-padding;
126307
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126274
126308
  }
126275
126309
 
126276
126310
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -55246,8 +55246,8 @@ $ripple-width: 32px !default;
55246
55246
 
55247
55247
  .e-list-item {
55248
55248
 
55249
- div.e-icons.e-icon-expandable::before,
55250
- div.e-icons.e-icon-collapsible::before {
55249
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
55250
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
55251
55251
  content: '\e22f';
55252
55252
  }
55253
55253
  }
@@ -125637,17 +125637,20 @@ $ribbon-large-items-icon-size: 32px !default;
125637
125637
  $ribbon-large-items-max-width: 10ch !default;
125638
125638
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
125639
125639
  $ribbon-large-items-btn-gap: 7px !default;
125640
+ $ribbon-large-items-min-width-height: 32px !default;
125640
125641
  $ribbon-items-border: none !default;
125641
125642
  $ribbon-items-border-radius: unset !default;
125642
125643
  $ribbon-items-font-weight: 400 !default;
125643
125644
  $ribbon-items-btn-size: 12px !default;
125644
125645
  $ribbon-items-label-size: 14px !default;
125645
125646
  $ribbon-items-btn-icon-size: 14px !default;
125647
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
125646
125648
  $ribbon-items-caret-icon-size: 12px !default;
125647
125649
  $ribbon-items-margin: 8px !default;
125648
125650
  $ribbon-checkbox-margin: 10px 0 10px 12px !default;
125649
125651
  $ribbon-rtl-checkbox-margin: 10px 12px 10px 0 !default;
125650
125652
  $ribbon-items-height: 18px !default;
125653
+ $ribbon-items-min-width-height: 16px !default;
125651
125654
  $ribbon-items-checkbox-size: 12px !default;
125652
125655
  $ribbon-items-checkbox-padding: 0 8px !default;
125653
125656
  $ribbon-input-group-height: 32px !default;
@@ -125782,6 +125785,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
125782
125785
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
125783
125786
  $ribbon-bigger-large-items-btn-size: 16px !default;
125784
125787
  $ribbon-bigger-large-items-btn-height: 24px !default;
125788
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
125789
+ $ribbon-bigger-items-min-width-height: 20px;
125785
125790
  $ribbon-bigger-large-items-btn-gap: 6px !default;
125786
125791
  $ribbon-bigger-items-padding: 2px !default;
125787
125792
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -125790,6 +125795,7 @@ $ribbon-bigger-items-height: 22px !default;
125790
125795
  $ribbon-bigger-items-icon-height: 20px !default;
125791
125796
  $ribbon-bigger-items-icon-size: 20px !default;
125792
125797
  $ribbon-bigger-items-btn-icon-size: 16px !default;
125798
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
125793
125799
  $ribbon-bigger-items-margin: 8px !default;
125794
125800
  $ribbon-bigger-checkbox-margin: 12px 0 12px 16px !default;
125795
125801
  $ribbon-bigger-rtl-checkbox-margin: 12px 16px 12px 0 !default;
@@ -126008,6 +126014,14 @@ $ribbon-items-focus-box-shadow: none !default;
126008
126014
  line-height: $line-height;
126009
126015
  }
126010
126016
 
126017
+ @mixin ribbon-items-icon-images($items-size) {
126018
+ min-height: $items-size;
126019
+ min-width: $items-size;
126020
+ background-repeat: no-repeat;
126021
+ background-size: contain;
126022
+ background-position: center;
126023
+ }
126024
+
126011
126025
  @mixin ribbon-font-props($font-size, $line-height) {
126012
126026
  font-size: $font-size;
126013
126027
  line-height: $line-height;
@@ -126676,6 +126690,7 @@ $ribbon-items-focus-box-shadow: none !default;
126676
126690
  }
126677
126691
 
126678
126692
  .e-btn-icon:not(.e-caret) {
126693
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
126679
126694
  font-size: $ribbon-large-items-icon-size;
126680
126695
  font-weight: $ribbon-items-font-weight;
126681
126696
  padding: $ribbon-large-items-icon-padding;
@@ -126794,6 +126809,9 @@ $ribbon-items-focus-box-shadow: none !default;
126794
126809
  .e-btn-icon {
126795
126810
  @include ribbon-font-props(16px, 16px);
126796
126811
  margin: $ribbon-items-margin;
126812
+ &:not(.e-caret) {
126813
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
126814
+ }
126797
126815
  }
126798
126816
  }
126799
126817
 
@@ -126935,6 +126953,13 @@ $ribbon-items-focus-box-shadow: none !default;
126935
126953
  width: 100%;
126936
126954
  height: $ribbon-medium-item-height;
126937
126955
 
126956
+ .e-btn .e-btn-icon {
126957
+ &:not(.e-caret) {
126958
+ min-width: $ribbon-overflow-items-min-width-height;
126959
+ min-height: $ribbon-overflow-items-min-width-height;
126960
+ }
126961
+ }
126962
+
126938
126963
  .e-btn .e-btn-icon.e-icon-left {
126939
126964
  margin: 0;
126940
126965
  }
@@ -126973,7 +126998,7 @@ $ribbon-items-focus-box-shadow: none !default;
126973
126998
 
126974
126999
  &.e-ribbon-medium-item {
126975
127000
  .e-btn .e-btn-icon.e-icon-left {
126976
- padding: $ribbon-button-icon-padding;
127001
+ margin: $ribbon-button-icon-padding;
126977
127002
  }
126978
127003
 
126979
127004
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127012,7 +127037,7 @@ $ribbon-items-focus-box-shadow: none !default;
127012
127037
 
127013
127038
  &.e-ribbon-medium-item {
127014
127039
  .e-btn .e-btn-icon.e-icon-left {
127015
- padding: $ribbon-rtl-button-icon-padding;
127040
+ margin: $ribbon-rtl-button-icon-padding;
127016
127041
  }
127017
127042
 
127018
127043
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127464,6 +127489,7 @@ $ribbon-items-focus-box-shadow: none !default;
127464
127489
  max-width: $ribbon-bigger-large-items-max-width;
127465
127490
 
127466
127491
  .e-btn-icon:not(.e-caret) {
127492
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
127467
127493
  font-size: $ribbon-bigger-large-items-icon-size;
127468
127494
  padding: $ribbon-bigger-large-items-icon-padding;
127469
127495
  }
@@ -127494,6 +127520,10 @@ $ribbon-items-focus-box-shadow: none !default;
127494
127520
  .e-btn-icon {
127495
127521
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
127496
127522
  margin: $ribbon-bigger-items-margin;
127523
+ &:not(.e-caret) {
127524
+ min-width: $ribbon-bigger-items-min-width-height;
127525
+ min-height: $ribbon-bigger-items-min-width-height;
127526
+ }
127497
127527
  }
127498
127528
  }
127499
127529
 
@@ -127550,6 +127580,10 @@ $ribbon-items-focus-box-shadow: none !default;
127550
127580
  }
127551
127581
  .e-btn .e-btn-icon {
127552
127582
  font-size: $ribbon-bigger-items-btn-icon-size;
127583
+ &:not(.e-caret) {
127584
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
127585
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
127586
+ }
127553
127587
  &.e-icon-left {
127554
127588
  margin: 0;
127555
127589
  }
@@ -127586,7 +127620,7 @@ $ribbon-items-focus-box-shadow: none !default;
127586
127620
 
127587
127621
  &.e-ribbon-medium-item {
127588
127622
  .e-btn .e-btn-icon.e-icon-left {
127589
- padding: $ribbon-bigger-button-icon-padding;
127623
+ margin: $ribbon-bigger-button-icon-padding;
127590
127624
  }
127591
127625
 
127592
127626
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127622,7 +127656,7 @@ $ribbon-items-focus-box-shadow: none !default;
127622
127656
 
127623
127657
  &.e-ribbon-medium-item {
127624
127658
  .e-btn .e-btn-icon.e-icon-left {
127625
- padding: $ribbon-bigger-rtl-button-icon-padding;
127659
+ margin: $ribbon-bigger-rtl-button-icon-padding;
127626
127660
  }
127627
127661
 
127628
127662
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -55007,8 +55007,8 @@ $ripple-width: 32px !default;
55007
55007
 
55008
55008
  .e-list-item {
55009
55009
 
55010
- div.e-icons.e-icon-expandable::before,
55011
- div.e-icons.e-icon-collapsible::before {
55010
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
55011
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
55012
55012
  content: '\e22f';
55013
55013
  }
55014
55014
  }
@@ -125386,17 +125386,20 @@ $ribbon-large-items-icon-size: 32px !default;
125386
125386
  $ribbon-large-items-max-width: 10ch !default;
125387
125387
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
125388
125388
  $ribbon-large-items-btn-gap: 7px !default;
125389
+ $ribbon-large-items-min-width-height: 32px !default;
125389
125390
  $ribbon-items-border: none !default;
125390
125391
  $ribbon-items-border-radius: unset !default;
125391
125392
  $ribbon-items-font-weight: 400 !default;
125392
125393
  $ribbon-items-btn-size: 12px !default;
125393
125394
  $ribbon-items-label-size: 14px !default;
125394
125395
  $ribbon-items-btn-icon-size: 12px !default;
125396
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
125395
125397
  $ribbon-items-caret-icon-size: 12px !default;
125396
125398
  $ribbon-items-margin: 8px !default;
125397
125399
  $ribbon-checkbox-margin: 10px 0 10px 12px !default;
125398
125400
  $ribbon-rtl-checkbox-margin: 10px 12px 10px 0 !default;
125399
125401
  $ribbon-items-height: 18px !default;
125402
+ $ribbon-items-min-width-height: 16px !default;
125400
125403
  $ribbon-items-checkbox-size: 12px !default;
125401
125404
  $ribbon-items-checkbox-padding: 0 8px !default;
125402
125405
  $ribbon-input-group-height: 32px !default;
@@ -125531,6 +125534,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
125531
125534
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
125532
125535
  $ribbon-bigger-large-items-btn-size: 16px !default;
125533
125536
  $ribbon-bigger-large-items-btn-height: 24px !default;
125537
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
125538
+ $ribbon-bigger-items-min-width-height: 20px;
125534
125539
  $ribbon-bigger-large-items-btn-gap: 6px !default;
125535
125540
  $ribbon-bigger-items-padding: 2px !default;
125536
125541
  $ribbon-bigger-items-btn-size: 16px !default;
@@ -125539,6 +125544,7 @@ $ribbon-bigger-items-height: 22px !default;
125539
125544
  $ribbon-bigger-items-icon-height: 20px !default;
125540
125545
  $ribbon-bigger-items-icon-size: 20px !default;
125541
125546
  $ribbon-bigger-items-btn-icon-size: 16px !default;
125547
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
125542
125548
  $ribbon-bigger-items-margin: 8px !default;
125543
125549
  $ribbon-bigger-checkbox-margin: 12px 0 12px 16px !default;
125544
125550
  $ribbon-bigger-rtl-checkbox-margin: 12px 16px 12px 0 !default;
@@ -125757,6 +125763,14 @@ $ribbon-items-focus-box-shadow: none !default;
125757
125763
  line-height: $line-height;
125758
125764
  }
125759
125765
 
125766
+ @mixin ribbon-items-icon-images($items-size) {
125767
+ min-height: $items-size;
125768
+ min-width: $items-size;
125769
+ background-repeat: no-repeat;
125770
+ background-size: contain;
125771
+ background-position: center;
125772
+ }
125773
+
125760
125774
  @mixin ribbon-font-props($font-size, $line-height) {
125761
125775
  font-size: $font-size;
125762
125776
  line-height: $line-height;
@@ -126425,6 +126439,7 @@ $ribbon-items-focus-box-shadow: none !default;
126425
126439
  }
126426
126440
 
126427
126441
  .e-btn-icon:not(.e-caret) {
126442
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
126428
126443
  font-size: $ribbon-large-items-icon-size;
126429
126444
  font-weight: $ribbon-items-font-weight;
126430
126445
  padding: $ribbon-large-items-icon-padding;
@@ -126543,6 +126558,9 @@ $ribbon-items-focus-box-shadow: none !default;
126543
126558
  .e-btn-icon {
126544
126559
  @include ribbon-font-props(16px, 16px);
126545
126560
  margin: $ribbon-items-margin;
126561
+ &:not(.e-caret) {
126562
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
126563
+ }
126546
126564
  }
126547
126565
  }
126548
126566
 
@@ -126684,6 +126702,13 @@ $ribbon-items-focus-box-shadow: none !default;
126684
126702
  width: 100%;
126685
126703
  height: $ribbon-medium-item-height;
126686
126704
 
126705
+ .e-btn .e-btn-icon {
126706
+ &:not(.e-caret) {
126707
+ min-width: $ribbon-overflow-items-min-width-height;
126708
+ min-height: $ribbon-overflow-items-min-width-height;
126709
+ }
126710
+ }
126711
+
126687
126712
  .e-btn .e-btn-icon.e-icon-left {
126688
126713
  margin: 0;
126689
126714
  }
@@ -126722,7 +126747,7 @@ $ribbon-items-focus-box-shadow: none !default;
126722
126747
 
126723
126748
  &.e-ribbon-medium-item {
126724
126749
  .e-btn .e-btn-icon.e-icon-left {
126725
- padding: $ribbon-button-icon-padding;
126750
+ margin: $ribbon-button-icon-padding;
126726
126751
  }
126727
126752
 
126728
126753
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126761,7 +126786,7 @@ $ribbon-items-focus-box-shadow: none !default;
126761
126786
 
126762
126787
  &.e-ribbon-medium-item {
126763
126788
  .e-btn .e-btn-icon.e-icon-left {
126764
- padding: $ribbon-rtl-button-icon-padding;
126789
+ margin: $ribbon-rtl-button-icon-padding;
126765
126790
  }
126766
126791
 
126767
126792
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127213,6 +127238,7 @@ $ribbon-items-focus-box-shadow: none !default;
127213
127238
  max-width: $ribbon-bigger-large-items-max-width;
127214
127239
 
127215
127240
  .e-btn-icon:not(.e-caret) {
127241
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
127216
127242
  font-size: $ribbon-bigger-large-items-icon-size;
127217
127243
  padding: $ribbon-bigger-large-items-icon-padding;
127218
127244
  }
@@ -127243,6 +127269,10 @@ $ribbon-items-focus-box-shadow: none !default;
127243
127269
  .e-btn-icon {
127244
127270
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
127245
127271
  margin: $ribbon-bigger-items-margin;
127272
+ &:not(.e-caret) {
127273
+ min-width: $ribbon-bigger-items-min-width-height;
127274
+ min-height: $ribbon-bigger-items-min-width-height;
127275
+ }
127246
127276
  }
127247
127277
  }
127248
127278
 
@@ -127299,6 +127329,10 @@ $ribbon-items-focus-box-shadow: none !default;
127299
127329
  }
127300
127330
  .e-btn .e-btn-icon {
127301
127331
  font-size: $ribbon-bigger-items-btn-icon-size;
127332
+ &:not(.e-caret) {
127333
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
127334
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
127335
+ }
127302
127336
  &.e-icon-left {
127303
127337
  margin: 0;
127304
127338
  }
@@ -127335,7 +127369,7 @@ $ribbon-items-focus-box-shadow: none !default;
127335
127369
 
127336
127370
  &.e-ribbon-medium-item {
127337
127371
  .e-btn .e-btn-icon.e-icon-left {
127338
- padding: $ribbon-bigger-button-icon-padding;
127372
+ margin: $ribbon-bigger-button-icon-padding;
127339
127373
  }
127340
127374
 
127341
127375
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127371,7 +127405,7 @@ $ribbon-items-focus-box-shadow: none !default;
127371
127405
 
127372
127406
  &.e-ribbon-medium-item {
127373
127407
  .e-btn .e-btn-icon.e-icon-left {
127374
- padding: $ribbon-bigger-rtl-button-icon-padding;
127408
+ margin: $ribbon-bigger-rtl-button-icon-padding;
127375
127409
  }
127376
127410
 
127377
127411
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {