@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
@@ -54465,8 +54465,8 @@ $ripple-width: 32px !default;
54465
54465
 
54466
54466
  .e-list-item {
54467
54467
 
54468
- div.e-icons.e-icon-expandable::before,
54469
- div.e-icons.e-icon-collapsible::before {
54468
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54469
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54470
54470
  content: '\e22e';
54471
54471
  }
54472
54472
  }
@@ -124057,17 +124057,20 @@ $ribbon-large-items-icon-size: 32px !default;
124057
124057
  $ribbon-large-items-max-width: 10ch !default;
124058
124058
  $ribbon-large-items-icon-padding: 12px 5px 4px !default;
124059
124059
  $ribbon-large-items-btn-gap: 5px !default;
124060
+ $ribbon-large-items-min-width-height: 32px !default;
124060
124061
  $ribbon-items-border: none !default;
124061
124062
  $ribbon-items-border-radius: unset !default;
124062
124063
  $ribbon-items-font-weight: 400 !default;
124063
124064
  $ribbon-items-btn-size: 14px !default;
124064
124065
  $ribbon-items-label-size: 14px !default;
124065
124066
  $ribbon-items-btn-icon-size: 14px !default;
124067
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124066
124068
  $ribbon-items-caret-icon-size: 14px !default;
124067
124069
  $ribbon-items-margin: 8px !default;
124068
124070
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
124069
124071
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
124070
124072
  $ribbon-items-height: 22px !default;
124073
+ $ribbon-items-min-width-height: 16px !default;
124071
124074
  $ribbon-items-checkbox-size: 14px !default;
124072
124075
  $ribbon-items-checkbox-padding: 0 8px !default;
124073
124076
  $ribbon-input-group-height: 32px !default;
@@ -124202,6 +124205,8 @@ $ribbon-bigger-large-items-icon-size: 36px !default;
124202
124205
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
124203
124206
  $ribbon-bigger-large-items-btn-size: 14px !default;
124204
124207
  $ribbon-bigger-large-items-btn-height: 22px !default;
124208
+ $ribbon-bigger-large-items-min-width-height: 36px !default;
124209
+ $ribbon-bigger-items-min-width-height: 20px;
124205
124210
  $ribbon-bigger-large-items-btn-gap: 9px !default;
124206
124211
  $ribbon-bigger-items-padding: 2px !default;
124207
124212
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -124210,6 +124215,7 @@ $ribbon-bigger-items-height: 22px !default;
124210
124215
  $ribbon-bigger-items-icon-height: 20px !default;
124211
124216
  $ribbon-bigger-items-icon-size: 20px !default;
124212
124217
  $ribbon-bigger-items-btn-icon-size: 18px !default;
124218
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124213
124219
  $ribbon-bigger-items-margin: 10px !default;
124214
124220
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124215
124221
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -124428,6 +124434,14 @@ $ribbon-items-focus-box-shadow: none !default;
124428
124434
  line-height: $line-height;
124429
124435
  }
124430
124436
 
124437
+ @mixin ribbon-items-icon-images($items-size) {
124438
+ min-height: $items-size;
124439
+ min-width: $items-size;
124440
+ background-repeat: no-repeat;
124441
+ background-size: contain;
124442
+ background-position: center;
124443
+ }
124444
+
124431
124445
  @mixin ribbon-font-props($font-size, $line-height) {
124432
124446
  font-size: $font-size;
124433
124447
  line-height: $line-height;
@@ -125096,6 +125110,7 @@ $ribbon-items-focus-box-shadow: none !default;
125096
125110
  }
125097
125111
 
125098
125112
  .e-btn-icon:not(.e-caret) {
125113
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125099
125114
  font-size: $ribbon-large-items-icon-size;
125100
125115
  font-weight: $ribbon-items-font-weight;
125101
125116
  padding: $ribbon-large-items-icon-padding;
@@ -125214,6 +125229,9 @@ $ribbon-items-focus-box-shadow: none !default;
125214
125229
  .e-btn-icon {
125215
125230
  @include ribbon-font-props(16px, 16px);
125216
125231
  margin: $ribbon-items-margin;
125232
+ &:not(.e-caret) {
125233
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125234
+ }
125217
125235
  }
125218
125236
  }
125219
125237
 
@@ -125355,6 +125373,13 @@ $ribbon-items-focus-box-shadow: none !default;
125355
125373
  width: 100%;
125356
125374
  height: $ribbon-medium-item-height;
125357
125375
 
125376
+ .e-btn .e-btn-icon {
125377
+ &:not(.e-caret) {
125378
+ min-width: $ribbon-overflow-items-min-width-height;
125379
+ min-height: $ribbon-overflow-items-min-width-height;
125380
+ }
125381
+ }
125382
+
125358
125383
  .e-btn .e-btn-icon.e-icon-left {
125359
125384
  margin: 0;
125360
125385
  }
@@ -125393,7 +125418,7 @@ $ribbon-items-focus-box-shadow: none !default;
125393
125418
 
125394
125419
  &.e-ribbon-medium-item {
125395
125420
  .e-btn .e-btn-icon.e-icon-left {
125396
- padding: $ribbon-button-icon-padding;
125421
+ margin: $ribbon-button-icon-padding;
125397
125422
  }
125398
125423
 
125399
125424
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -125432,7 +125457,7 @@ $ribbon-items-focus-box-shadow: none !default;
125432
125457
 
125433
125458
  &.e-ribbon-medium-item {
125434
125459
  .e-btn .e-btn-icon.e-icon-left {
125435
- padding: $ribbon-rtl-button-icon-padding;
125460
+ margin: $ribbon-rtl-button-icon-padding;
125436
125461
  }
125437
125462
 
125438
125463
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -125884,6 +125909,7 @@ $ribbon-items-focus-box-shadow: none !default;
125884
125909
  max-width: $ribbon-bigger-large-items-max-width;
125885
125910
 
125886
125911
  .e-btn-icon:not(.e-caret) {
125912
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
125887
125913
  font-size: $ribbon-bigger-large-items-icon-size;
125888
125914
  padding: $ribbon-bigger-large-items-icon-padding;
125889
125915
  }
@@ -125914,6 +125940,10 @@ $ribbon-items-focus-box-shadow: none !default;
125914
125940
  .e-btn-icon {
125915
125941
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
125916
125942
  margin: $ribbon-bigger-items-margin;
125943
+ &:not(.e-caret) {
125944
+ min-width: $ribbon-bigger-items-min-width-height;
125945
+ min-height: $ribbon-bigger-items-min-width-height;
125946
+ }
125917
125947
  }
125918
125948
  }
125919
125949
 
@@ -125970,6 +126000,10 @@ $ribbon-items-focus-box-shadow: none !default;
125970
126000
  }
125971
126001
  .e-btn .e-btn-icon {
125972
126002
  font-size: $ribbon-bigger-items-btn-icon-size;
126003
+ &:not(.e-caret) {
126004
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126005
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126006
+ }
125973
126007
  &.e-icon-left {
125974
126008
  margin: 0;
125975
126009
  }
@@ -126006,7 +126040,7 @@ $ribbon-items-focus-box-shadow: none !default;
126006
126040
 
126007
126041
  &.e-ribbon-medium-item {
126008
126042
  .e-btn .e-btn-icon.e-icon-left {
126009
- padding: $ribbon-bigger-button-icon-padding;
126043
+ margin: $ribbon-bigger-button-icon-padding;
126010
126044
  }
126011
126045
 
126012
126046
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126042,7 +126076,7 @@ $ribbon-items-focus-box-shadow: none !default;
126042
126076
 
126043
126077
  &.e-ribbon-medium-item {
126044
126078
  .e-btn .e-btn-icon.e-icon-left {
126045
- padding: $ribbon-bigger-rtl-button-icon-padding;
126079
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126046
126080
  }
126047
126081
 
126048
126082
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -54983,8 +54983,8 @@ $treeview-item-active-check-color: $primary !default;
54983
54983
 
54984
54984
  .e-list-item {
54985
54985
 
54986
- div.e-icons.e-icon-expandable::before,
54987
- div.e-icons.e-icon-collapsible::before {
54986
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54987
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54988
54988
  content: '\e75c';
54989
54989
  }
54990
54990
  }
@@ -124808,17 +124808,20 @@ $ribbon-large-items-btn-height: 18px !default;
124808
124808
  $ribbon-large-items-icon-size: $text-2xl !default;
124809
124809
  $ribbon-large-items-max-width: 10ch !default;
124810
124810
  $ribbon-large-items-btn-gap: 4px !default;
124811
+ $ribbon-large-items-min-width-height: 24px !default;
124811
124812
  $ribbon-items-border: none !default;
124812
124813
  $ribbon-items-border-radius: 2px !default;
124813
124814
  $ribbon-items-font-weight: $font-weight-normal !default;
124814
124815
  $ribbon-items-btn-size: $text-xs !default;
124815
124816
  $ribbon-items-label-size: $text-sm !default;
124816
124817
  $ribbon-items-btn-icon-size: $text-sm !default;
124818
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124817
124819
  $ribbon-items-caret-icon-size: $text-sm !default;
124818
124820
  $ribbon-items-margin: 5px !default;
124819
124821
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
124820
124822
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
124821
124823
  $ribbon-items-height: 18px !default;
124824
+ $ribbon-items-min-width-height: 16px !default;
124822
124825
  $ribbon-items-checkbox-size: $text-xs !default;
124823
124826
  $ribbon-items-checkbox-padding: 0 5px !default;
124824
124827
  $ribbon-input-group-height: 26px !default;
@@ -124953,6 +124956,8 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
124953
124956
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
124954
124957
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
124955
124958
  $ribbon-bigger-large-items-btn-height: 125% !default;
124959
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
124960
+ $ribbon-bigger-items-min-width-height: 20px;
124956
124961
  $ribbon-bigger-large-items-btn-gap: 8px !default;
124957
124962
  $ribbon-bigger-items-padding: 2px !default;
124958
124963
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -124961,6 +124966,7 @@ $ribbon-bigger-items-height: 125% !default;
124961
124966
  $ribbon-bigger-items-icon-height: 20px !default;
124962
124967
  $ribbon-bigger-items-icon-size: $text-xl !default;
124963
124968
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
124969
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124964
124970
  $ribbon-bigger-items-margin: 7px !default;
124965
124971
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124966
124972
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -125179,6 +125185,14 @@ $ribbon-items-focus-box-shadow: none !default;
125179
125185
  line-height: $line-height;
125180
125186
  }
125181
125187
 
125188
+ @mixin ribbon-items-icon-images($items-size) {
125189
+ min-height: $items-size;
125190
+ min-width: $items-size;
125191
+ background-repeat: no-repeat;
125192
+ background-size: contain;
125193
+ background-position: center;
125194
+ }
125195
+
125182
125196
  @mixin ribbon-font-props($font-size, $line-height) {
125183
125197
  font-size: $font-size;
125184
125198
  line-height: $line-height;
@@ -125847,6 +125861,7 @@ $ribbon-items-focus-box-shadow: none !default;
125847
125861
  }
125848
125862
 
125849
125863
  .e-btn-icon:not(.e-caret) {
125864
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125850
125865
  font-size: $ribbon-large-items-icon-size;
125851
125866
  font-weight: $ribbon-items-font-weight;
125852
125867
  padding: $ribbon-large-items-icon-padding;
@@ -125965,6 +125980,9 @@ $ribbon-items-focus-box-shadow: none !default;
125965
125980
  .e-btn-icon {
125966
125981
  @include ribbon-font-props(16px, 16px);
125967
125982
  margin: $ribbon-items-margin;
125983
+ &:not(.e-caret) {
125984
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125985
+ }
125968
125986
  }
125969
125987
  }
125970
125988
 
@@ -126106,6 +126124,13 @@ $ribbon-items-focus-box-shadow: none !default;
126106
126124
  width: 100%;
126107
126125
  height: $ribbon-medium-item-height;
126108
126126
 
126127
+ .e-btn .e-btn-icon {
126128
+ &:not(.e-caret) {
126129
+ min-width: $ribbon-overflow-items-min-width-height;
126130
+ min-height: $ribbon-overflow-items-min-width-height;
126131
+ }
126132
+ }
126133
+
126109
126134
  .e-btn .e-btn-icon.e-icon-left {
126110
126135
  margin: 0;
126111
126136
  }
@@ -126144,7 +126169,7 @@ $ribbon-items-focus-box-shadow: none !default;
126144
126169
 
126145
126170
  &.e-ribbon-medium-item {
126146
126171
  .e-btn .e-btn-icon.e-icon-left {
126147
- padding: $ribbon-button-icon-padding;
126172
+ margin: $ribbon-button-icon-padding;
126148
126173
  }
126149
126174
 
126150
126175
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126183,7 +126208,7 @@ $ribbon-items-focus-box-shadow: none !default;
126183
126208
 
126184
126209
  &.e-ribbon-medium-item {
126185
126210
  .e-btn .e-btn-icon.e-icon-left {
126186
- padding: $ribbon-rtl-button-icon-padding;
126211
+ margin: $ribbon-rtl-button-icon-padding;
126187
126212
  }
126188
126213
 
126189
126214
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126635,6 +126660,7 @@ $ribbon-items-focus-box-shadow: none !default;
126635
126660
  max-width: $ribbon-bigger-large-items-max-width;
126636
126661
 
126637
126662
  .e-btn-icon:not(.e-caret) {
126663
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
126638
126664
  font-size: $ribbon-bigger-large-items-icon-size;
126639
126665
  padding: $ribbon-bigger-large-items-icon-padding;
126640
126666
  }
@@ -126665,6 +126691,10 @@ $ribbon-items-focus-box-shadow: none !default;
126665
126691
  .e-btn-icon {
126666
126692
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
126667
126693
  margin: $ribbon-bigger-items-margin;
126694
+ &:not(.e-caret) {
126695
+ min-width: $ribbon-bigger-items-min-width-height;
126696
+ min-height: $ribbon-bigger-items-min-width-height;
126697
+ }
126668
126698
  }
126669
126699
  }
126670
126700
 
@@ -126721,6 +126751,10 @@ $ribbon-items-focus-box-shadow: none !default;
126721
126751
  }
126722
126752
  .e-btn .e-btn-icon {
126723
126753
  font-size: $ribbon-bigger-items-btn-icon-size;
126754
+ &:not(.e-caret) {
126755
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126756
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126757
+ }
126724
126758
  &.e-icon-left {
126725
126759
  margin: 0;
126726
126760
  }
@@ -126757,7 +126791,7 @@ $ribbon-items-focus-box-shadow: none !default;
126757
126791
 
126758
126792
  &.e-ribbon-medium-item {
126759
126793
  .e-btn .e-btn-icon.e-icon-left {
126760
- padding: $ribbon-bigger-button-icon-padding;
126794
+ margin: $ribbon-bigger-button-icon-padding;
126761
126795
  }
126762
126796
 
126763
126797
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126793,7 +126827,7 @@ $ribbon-items-focus-box-shadow: none !default;
126793
126827
 
126794
126828
  &.e-ribbon-medium-item {
126795
126829
  .e-btn .e-btn-icon.e-icon-left {
126796
- padding: $ribbon-bigger-rtl-button-icon-padding;
126830
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126797
126831
  }
126798
126832
 
126799
126833
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -54983,8 +54983,8 @@ $treeview-item-active-check-color: $primary !default;
54983
54983
 
54984
54984
  .e-list-item {
54985
54985
 
54986
- div.e-icons.e-icon-expandable::before,
54987
- div.e-icons.e-icon-collapsible::before {
54986
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54987
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54988
54988
  content: '\e75c';
54989
54989
  }
54990
54990
  }
@@ -124808,17 +124808,20 @@ $ribbon-large-items-btn-height: 18px !default;
124808
124808
  $ribbon-large-items-icon-size: $text-2xl !default;
124809
124809
  $ribbon-large-items-max-width: 10ch !default;
124810
124810
  $ribbon-large-items-btn-gap: 4px !default;
124811
+ $ribbon-large-items-min-width-height: 24px !default;
124811
124812
  $ribbon-items-border: none !default;
124812
124813
  $ribbon-items-border-radius: 2px !default;
124813
124814
  $ribbon-items-font-weight: $font-weight-normal !default;
124814
124815
  $ribbon-items-btn-size: $text-xs !default;
124815
124816
  $ribbon-items-label-size: $text-sm !default;
124816
124817
  $ribbon-items-btn-icon-size: $text-sm !default;
124818
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124817
124819
  $ribbon-items-caret-icon-size: $text-sm !default;
124818
124820
  $ribbon-items-margin: 5px !default;
124819
124821
  $ribbon-checkbox-margin: 9px 0 9px 12px !default;
124820
124822
  $ribbon-rtl-checkbox-margin: 9px 12px 9px 0 !default;
124821
124823
  $ribbon-items-height: 18px !default;
124824
+ $ribbon-items-min-width-height: 16px !default;
124822
124825
  $ribbon-items-checkbox-size: $text-xs !default;
124823
124826
  $ribbon-items-checkbox-padding: 0 5px !default;
124824
124827
  $ribbon-input-group-height: 26px !default;
@@ -124953,6 +124956,8 @@ $ribbon-bigger-large-items-icon-size: $text-4xl !default;
124953
124956
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
124954
124957
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
124955
124958
  $ribbon-bigger-large-items-btn-height: 125% !default;
124959
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
124960
+ $ribbon-bigger-items-min-width-height: 20px;
124956
124961
  $ribbon-bigger-large-items-btn-gap: 8px !default;
124957
124962
  $ribbon-bigger-items-padding: 2px !default;
124958
124963
  $ribbon-bigger-items-btn-size: $text-sm !default;
@@ -124961,6 +124966,7 @@ $ribbon-bigger-items-height: 125% !default;
124961
124966
  $ribbon-bigger-items-icon-height: 20px !default;
124962
124967
  $ribbon-bigger-items-icon-size: $text-xl !default;
124963
124968
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
124969
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124964
124970
  $ribbon-bigger-items-margin: 7px !default;
124965
124971
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124966
124972
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -125179,6 +125185,14 @@ $ribbon-items-focus-box-shadow: none !default;
125179
125185
  line-height: $line-height;
125180
125186
  }
125181
125187
 
125188
+ @mixin ribbon-items-icon-images($items-size) {
125189
+ min-height: $items-size;
125190
+ min-width: $items-size;
125191
+ background-repeat: no-repeat;
125192
+ background-size: contain;
125193
+ background-position: center;
125194
+ }
125195
+
125182
125196
  @mixin ribbon-font-props($font-size, $line-height) {
125183
125197
  font-size: $font-size;
125184
125198
  line-height: $line-height;
@@ -125847,6 +125861,7 @@ $ribbon-items-focus-box-shadow: none !default;
125847
125861
  }
125848
125862
 
125849
125863
  .e-btn-icon:not(.e-caret) {
125864
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125850
125865
  font-size: $ribbon-large-items-icon-size;
125851
125866
  font-weight: $ribbon-items-font-weight;
125852
125867
  padding: $ribbon-large-items-icon-padding;
@@ -125965,6 +125980,9 @@ $ribbon-items-focus-box-shadow: none !default;
125965
125980
  .e-btn-icon {
125966
125981
  @include ribbon-font-props(16px, 16px);
125967
125982
  margin: $ribbon-items-margin;
125983
+ &:not(.e-caret) {
125984
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125985
+ }
125968
125986
  }
125969
125987
  }
125970
125988
 
@@ -126106,6 +126124,13 @@ $ribbon-items-focus-box-shadow: none !default;
126106
126124
  width: 100%;
126107
126125
  height: $ribbon-medium-item-height;
126108
126126
 
126127
+ .e-btn .e-btn-icon {
126128
+ &:not(.e-caret) {
126129
+ min-width: $ribbon-overflow-items-min-width-height;
126130
+ min-height: $ribbon-overflow-items-min-width-height;
126131
+ }
126132
+ }
126133
+
126109
126134
  .e-btn .e-btn-icon.e-icon-left {
126110
126135
  margin: 0;
126111
126136
  }
@@ -126144,7 +126169,7 @@ $ribbon-items-focus-box-shadow: none !default;
126144
126169
 
126145
126170
  &.e-ribbon-medium-item {
126146
126171
  .e-btn .e-btn-icon.e-icon-left {
126147
- padding: $ribbon-button-icon-padding;
126172
+ margin: $ribbon-button-icon-padding;
126148
126173
  }
126149
126174
 
126150
126175
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126183,7 +126208,7 @@ $ribbon-items-focus-box-shadow: none !default;
126183
126208
 
126184
126209
  &.e-ribbon-medium-item {
126185
126210
  .e-btn .e-btn-icon.e-icon-left {
126186
- padding: $ribbon-rtl-button-icon-padding;
126211
+ margin: $ribbon-rtl-button-icon-padding;
126187
126212
  }
126188
126213
 
126189
126214
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126635,6 +126660,7 @@ $ribbon-items-focus-box-shadow: none !default;
126635
126660
  max-width: $ribbon-bigger-large-items-max-width;
126636
126661
 
126637
126662
  .e-btn-icon:not(.e-caret) {
126663
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
126638
126664
  font-size: $ribbon-bigger-large-items-icon-size;
126639
126665
  padding: $ribbon-bigger-large-items-icon-padding;
126640
126666
  }
@@ -126665,6 +126691,10 @@ $ribbon-items-focus-box-shadow: none !default;
126665
126691
  .e-btn-icon {
126666
126692
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
126667
126693
  margin: $ribbon-bigger-items-margin;
126694
+ &:not(.e-caret) {
126695
+ min-width: $ribbon-bigger-items-min-width-height;
126696
+ min-height: $ribbon-bigger-items-min-width-height;
126697
+ }
126668
126698
  }
126669
126699
  }
126670
126700
 
@@ -126721,6 +126751,10 @@ $ribbon-items-focus-box-shadow: none !default;
126721
126751
  }
126722
126752
  .e-btn .e-btn-icon {
126723
126753
  font-size: $ribbon-bigger-items-btn-icon-size;
126754
+ &:not(.e-caret) {
126755
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126756
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126757
+ }
126724
126758
  &.e-icon-left {
126725
126759
  margin: 0;
126726
126760
  }
@@ -126757,7 +126791,7 @@ $ribbon-items-focus-box-shadow: none !default;
126757
126791
 
126758
126792
  &.e-ribbon-medium-item {
126759
126793
  .e-btn .e-btn-icon.e-icon-left {
126760
- padding: $ribbon-bigger-button-icon-padding;
126794
+ margin: $ribbon-bigger-button-icon-padding;
126761
126795
  }
126762
126796
 
126763
126797
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126793,7 +126827,7 @@ $ribbon-items-focus-box-shadow: none !default;
126793
126827
 
126794
126828
  &.e-ribbon-medium-item {
126795
126829
  .e-btn .e-btn-icon.e-icon-left {
126796
- padding: $ribbon-bigger-rtl-button-icon-padding;
126830
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126797
126831
  }
126798
126832
 
126799
126833
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -56536,8 +56536,8 @@ $treeview-drag-icon-color: $treeview-icon-color !default;
56536
56536
 
56537
56537
  .e-list-item {
56538
56538
 
56539
- div.e-icons.e-icon-expandable::before,
56540
- div.e-icons.e-icon-collapsible::before {
56539
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
56540
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
56541
56541
  content: '\e75c';
56542
56542
  }
56543
56543
  }
@@ -127049,15 +127049,18 @@ $ribbon-large-items-btn-height: 16px !default;
127049
127049
  $ribbon-large-items-icon-size: $text-2xl !default;
127050
127050
  $ribbon-large-items-max-width: 11ch !default;
127051
127051
  $ribbon-large-items-btn-gap: 4px !default;
127052
+ $ribbon-large-items-min-width-height: 24px !default;
127052
127053
  $ribbon-items-border: none !default;
127053
127054
  $ribbon-items-border-radius: 4px !default;
127054
127055
  $ribbon-items-font-weight: $font-weight-normal !default;
127055
127056
  $ribbon-items-btn-size: $text-sm !default;
127056
127057
  $ribbon-items-label-size: $text-sm !default;
127057
127058
  $ribbon-items-btn-icon-size : $text-base !default;
127059
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
127058
127060
  $ribbon-items-caret-icon-size: $text-sm !default;
127059
127061
  $ribbon-items-margin: 8px !default;
127060
127062
  $ribbon-items-height: 20px !default;
127063
+ $ribbon-items-min-width-height: 16px !default;
127061
127064
  $ribbon-checkbox-margin: 8px 0 8px 8px !default;
127062
127065
  $ribbon-rtl-checkbox-margin: 8px 8px 8px 0 !default;
127063
127066
  $ribbon-items-checkbox-size: $text-sm !default;
@@ -127195,6 +127198,8 @@ $ribbon-bigger-large-items-btn-padding: 0 12px !default;
127195
127198
  $ribbon-bigger-large-items-btn-gap: 8px !default;
127196
127199
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
127197
127200
  $ribbon-bigger-large-items-btn-height: 20px !default;
127201
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
127202
+ $ribbon-bigger-items-min-width-height: 18px;
127198
127203
  $ribbon-bigger-items-padding: 0 !default;
127199
127204
  $ribbon-bigger-items-btn-size: $text-base !default;
127200
127205
  $ribbon-bigger-items-height: 22px !default;
@@ -127203,6 +127208,7 @@ $ribbon-bigger-items-icon-height: 18px !default;
127203
127208
  $ribbon-bigger-items-icon-size: $text-lg !default;
127204
127209
  $ribbon-bigger-items-margin: 11px !default;
127205
127210
  $ribbon-bigger-items-btn-icon-size: $text-base !default;
127211
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
127206
127212
  $ribbon-bigger-items-checkbox-size: $text-base !default;
127207
127213
  $ribbon-bigger-checkbox-margin: 8px 0 8px 6px !default;
127208
127214
  $ribbon-bigger-rtl-checkbox-margin: 8px 6px 8px 0 !default;
@@ -127420,6 +127426,14 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
127420
127426
  line-height: $line-height;
127421
127427
  }
127422
127428
 
127429
+ @mixin ribbon-items-icon-images($items-size) {
127430
+ min-height: $items-size;
127431
+ min-width: $items-size;
127432
+ background-repeat: no-repeat;
127433
+ background-size: contain;
127434
+ background-position: center;
127435
+ }
127436
+
127423
127437
  @mixin ribbon-font-props($font-size, $line-height) {
127424
127438
  font-size: $font-size;
127425
127439
  line-height: $line-height;
@@ -128088,6 +128102,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128088
128102
  }
128089
128103
 
128090
128104
  .e-btn-icon:not(.e-caret) {
128105
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
128091
128106
  font-size: $ribbon-large-items-icon-size;
128092
128107
  font-weight: $ribbon-items-font-weight;
128093
128108
  padding: $ribbon-large-items-icon-padding;
@@ -128206,6 +128221,9 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128206
128221
  .e-btn-icon {
128207
128222
  @include ribbon-font-props(16px, 16px);
128208
128223
  margin: $ribbon-items-margin;
128224
+ &:not(.e-caret) {
128225
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
128226
+ }
128209
128227
  }
128210
128228
  }
128211
128229
 
@@ -128347,6 +128365,13 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128347
128365
  width: 100%;
128348
128366
  height: $ribbon-medium-item-height;
128349
128367
 
128368
+ .e-btn .e-btn-icon {
128369
+ &:not(.e-caret) {
128370
+ min-width: $ribbon-overflow-items-min-width-height;
128371
+ min-height: $ribbon-overflow-items-min-width-height;
128372
+ }
128373
+ }
128374
+
128350
128375
  .e-btn .e-btn-icon.e-icon-left {
128351
128376
  margin: 0;
128352
128377
  }
@@ -128385,7 +128410,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128385
128410
 
128386
128411
  &.e-ribbon-medium-item {
128387
128412
  .e-btn .e-btn-icon.e-icon-left {
128388
- padding: $ribbon-button-icon-padding;
128413
+ margin: $ribbon-button-icon-padding;
128389
128414
  }
128390
128415
 
128391
128416
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -128424,7 +128449,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128424
128449
 
128425
128450
  &.e-ribbon-medium-item {
128426
128451
  .e-btn .e-btn-icon.e-icon-left {
128427
- padding: $ribbon-rtl-button-icon-padding;
128452
+ margin: $ribbon-rtl-button-icon-padding;
128428
128453
  }
128429
128454
 
128430
128455
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -128876,6 +128901,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128876
128901
  max-width: $ribbon-bigger-large-items-max-width;
128877
128902
 
128878
128903
  .e-btn-icon:not(.e-caret) {
128904
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
128879
128905
  font-size: $ribbon-bigger-large-items-icon-size;
128880
128906
  padding: $ribbon-bigger-large-items-icon-padding;
128881
128907
  }
@@ -128906,6 +128932,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128906
128932
  .e-btn-icon {
128907
128933
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
128908
128934
  margin: $ribbon-bigger-items-margin;
128935
+ &:not(.e-caret) {
128936
+ min-width: $ribbon-bigger-items-min-width-height;
128937
+ min-height: $ribbon-bigger-items-min-width-height;
128938
+ }
128909
128939
  }
128910
128940
  }
128911
128941
 
@@ -128962,6 +128992,10 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128962
128992
  }
128963
128993
  .e-btn .e-btn-icon {
128964
128994
  font-size: $ribbon-bigger-items-btn-icon-size;
128995
+ &:not(.e-caret) {
128996
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
128997
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
128998
+ }
128965
128999
  &.e-icon-left {
128966
129000
  margin: 0;
128967
129001
  }
@@ -128998,7 +129032,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
128998
129032
 
128999
129033
  &.e-ribbon-medium-item {
129000
129034
  .e-btn .e-btn-icon.e-icon-left {
129001
- padding: $ribbon-bigger-button-icon-padding;
129035
+ margin: $ribbon-bigger-button-icon-padding;
129002
129036
  }
129003
129037
 
129004
129038
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -129034,7 +129068,7 @@ $ribbon-gallery-button-selected-icon-color: $icon-color !default;
129034
129068
 
129035
129069
  &.e-ribbon-medium-item {
129036
129070
  .e-btn .e-btn-icon.e-icon-left {
129037
- padding: $ribbon-bigger-rtl-button-icon-padding;
129071
+ margin: $ribbon-bigger-rtl-button-icon-padding;
129038
129072
  }
129039
129073
 
129040
129074
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {