@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
@@ -55981,8 +55981,8 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
55981
55981
 
55982
55982
  .e-list-item {
55983
55983
 
55984
- div.e-icons.e-icon-expandable::before,
55985
- div.e-icons.e-icon-collapsible::before {
55984
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
55985
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
55986
55986
  content: '\e75c';
55987
55987
  }
55988
55988
  }
@@ -125837,15 +125837,18 @@ $ribbon-large-items-btn-height: 18px !default;
125837
125837
  $ribbon-large-items-icon-size: $text-2xl !default;
125838
125838
  $ribbon-large-items-max-width: 10ch !default;
125839
125839
  $ribbon-large-items-btn-gap: 4px !default;
125840
+ $ribbon-large-items-min-width-height: 24px !default;
125840
125841
  $ribbon-items-border: none !default;
125841
125842
  $ribbon-items-border-radius: 4px !default;
125842
125843
  $ribbon-items-font-weight: $font-weight-normal !default;
125843
125844
  $ribbon-items-btn-size: $text-xs !default;
125844
125845
  $ribbon-items-label-size: $text-sm !default;
125845
125846
  $ribbon-items-btn-icon-size : $text-base !default;
125847
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
125846
125848
  $ribbon-items-caret-icon-size: $text-sm !default;
125847
125849
  $ribbon-items-margin: 5px !default;
125848
125850
  $ribbon-items-height: 18px !default;
125851
+ $ribbon-items-min-width-height: 16px !default;
125849
125852
  $ribbon-checkbox-margin: 8px 0 8px 12px !default;
125850
125853
  $ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
125851
125854
  $ribbon-items-checkbox-size: $text-xs !default;
@@ -125983,6 +125986,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
125983
125986
  $ribbon-bigger-large-items-btn-gap: 8px !default;
125984
125987
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
125985
125988
  $ribbon-bigger-large-items-btn-height: 125% !default;
125989
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
125990
+ $ribbon-bigger-items-min-width-height: $text-xl;
125986
125991
  $ribbon-bigger-items-padding: 2px !default;
125987
125992
  $ribbon-bigger-items-btn-size: $text-sm !default;
125988
125993
  $ribbon-bigger-items-height: 125% !default;
@@ -125991,6 +125996,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
125991
125996
  $ribbon-bigger-items-icon-size: $text-xl !default;
125992
125997
  $ribbon-bigger-items-margin: 7px !default;
125993
125998
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
125999
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
125994
126000
  $ribbon-bigger-items-checkbox-size: $text-sm !default;
125995
126001
  $ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
125996
126002
  $ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
@@ -126208,6 +126214,14 @@ $ribbon-items-focus-box-shadow: none !default;
126208
126214
  line-height: $line-height;
126209
126215
  }
126210
126216
 
126217
+ @mixin ribbon-items-icon-images($items-size) {
126218
+ min-height: $items-size;
126219
+ min-width: $items-size;
126220
+ background-repeat: no-repeat;
126221
+ background-size: contain;
126222
+ background-position: center;
126223
+ }
126224
+
126211
126225
  @mixin ribbon-font-props($font-size, $line-height) {
126212
126226
  font-size: $font-size;
126213
126227
  line-height: $line-height;
@@ -126876,6 +126890,7 @@ $ribbon-items-focus-box-shadow: none !default;
126876
126890
  }
126877
126891
 
126878
126892
  .e-btn-icon:not(.e-caret) {
126893
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
126879
126894
  font-size: $ribbon-large-items-icon-size;
126880
126895
  font-weight: $ribbon-items-font-weight;
126881
126896
  padding: $ribbon-large-items-icon-padding;
@@ -126994,6 +127009,9 @@ $ribbon-items-focus-box-shadow: none !default;
126994
127009
  .e-btn-icon {
126995
127010
  @include ribbon-font-props(16px, 16px);
126996
127011
  margin: $ribbon-items-margin;
127012
+ &:not(.e-caret) {
127013
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
127014
+ }
126997
127015
  }
126998
127016
  }
126999
127017
 
@@ -127135,6 +127153,13 @@ $ribbon-items-focus-box-shadow: none !default;
127135
127153
  width: 100%;
127136
127154
  height: $ribbon-medium-item-height;
127137
127155
 
127156
+ .e-btn .e-btn-icon {
127157
+ &:not(.e-caret) {
127158
+ min-width: $ribbon-overflow-items-min-width-height;
127159
+ min-height: $ribbon-overflow-items-min-width-height;
127160
+ }
127161
+ }
127162
+
127138
127163
  .e-btn .e-btn-icon.e-icon-left {
127139
127164
  margin: 0;
127140
127165
  }
@@ -127173,7 +127198,7 @@ $ribbon-items-focus-box-shadow: none !default;
127173
127198
 
127174
127199
  &.e-ribbon-medium-item {
127175
127200
  .e-btn .e-btn-icon.e-icon-left {
127176
- padding: $ribbon-button-icon-padding;
127201
+ margin: $ribbon-button-icon-padding;
127177
127202
  }
127178
127203
 
127179
127204
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127212,7 +127237,7 @@ $ribbon-items-focus-box-shadow: none !default;
127212
127237
 
127213
127238
  &.e-ribbon-medium-item {
127214
127239
  .e-btn .e-btn-icon.e-icon-left {
127215
- padding: $ribbon-rtl-button-icon-padding;
127240
+ margin: $ribbon-rtl-button-icon-padding;
127216
127241
  }
127217
127242
 
127218
127243
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127664,6 +127689,7 @@ $ribbon-items-focus-box-shadow: none !default;
127664
127689
  max-width: $ribbon-bigger-large-items-max-width;
127665
127690
 
127666
127691
  .e-btn-icon:not(.e-caret) {
127692
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
127667
127693
  font-size: $ribbon-bigger-large-items-icon-size;
127668
127694
  padding: $ribbon-bigger-large-items-icon-padding;
127669
127695
  }
@@ -127694,6 +127720,10 @@ $ribbon-items-focus-box-shadow: none !default;
127694
127720
  .e-btn-icon {
127695
127721
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
127696
127722
  margin: $ribbon-bigger-items-margin;
127723
+ &:not(.e-caret) {
127724
+ min-width: $ribbon-bigger-items-min-width-height;
127725
+ min-height: $ribbon-bigger-items-min-width-height;
127726
+ }
127697
127727
  }
127698
127728
  }
127699
127729
 
@@ -127750,6 +127780,10 @@ $ribbon-items-focus-box-shadow: none !default;
127750
127780
  }
127751
127781
  .e-btn .e-btn-icon {
127752
127782
  font-size: $ribbon-bigger-items-btn-icon-size;
127783
+ &:not(.e-caret) {
127784
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
127785
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
127786
+ }
127753
127787
  &.e-icon-left {
127754
127788
  margin: 0;
127755
127789
  }
@@ -127786,7 +127820,7 @@ $ribbon-items-focus-box-shadow: none !default;
127786
127820
 
127787
127821
  &.e-ribbon-medium-item {
127788
127822
  .e-btn .e-btn-icon.e-icon-left {
127789
- padding: $ribbon-bigger-button-icon-padding;
127823
+ margin: $ribbon-bigger-button-icon-padding;
127790
127824
  }
127791
127825
 
127792
127826
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127822,7 +127856,7 @@ $ribbon-items-focus-box-shadow: none !default;
127822
127856
 
127823
127857
  &.e-ribbon-medium-item {
127824
127858
  .e-btn .e-btn-icon.e-icon-left {
127825
- padding: $ribbon-bigger-rtl-button-icon-padding;
127859
+ margin: $ribbon-bigger-rtl-button-icon-padding;
127826
127860
  }
127827
127861
 
127828
127862
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -56241,8 +56241,8 @@ $treeview-item-active-hover-bg:$content-bg-color-hover !default;
56241
56241
 
56242
56242
  .e-list-item {
56243
56243
 
56244
- div.e-icons.e-icon-expandable::before,
56245
- div.e-icons.e-icon-collapsible::before {
56244
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
56245
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
56246
56246
  content: '\e75c';
56247
56247
  }
56248
56248
  }
@@ -126097,15 +126097,18 @@ $ribbon-large-items-btn-height: 18px !default;
126097
126097
  $ribbon-large-items-icon-size: $text-2xl !default;
126098
126098
  $ribbon-large-items-max-width: 10ch !default;
126099
126099
  $ribbon-large-items-btn-gap: 4px !default;
126100
+ $ribbon-large-items-min-width-height: 24px !default;
126100
126101
  $ribbon-items-border: none !default;
126101
126102
  $ribbon-items-border-radius: 4px !default;
126102
126103
  $ribbon-items-font-weight: $font-weight-normal !default;
126103
126104
  $ribbon-items-btn-size: $text-xs !default;
126104
126105
  $ribbon-items-label-size: $text-sm !default;
126105
126106
  $ribbon-items-btn-icon-size : $text-base !default;
126107
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
126106
126108
  $ribbon-items-caret-icon-size: $text-sm !default;
126107
126109
  $ribbon-items-margin: 5px !default;
126108
126110
  $ribbon-items-height: 18px !default;
126111
+ $ribbon-items-min-width-height: 16px !default;
126109
126112
  $ribbon-checkbox-margin: 8px 0 8px 12px !default;
126110
126113
  $ribbon-rtl-checkbox-margin: 8px 12px 8px 0 !default;
126111
126114
  $ribbon-items-checkbox-size: $text-xs !default;
@@ -126243,6 +126246,8 @@ $ribbon-bigger-large-items-btn-padding: 0 5px !default;
126243
126246
  $ribbon-bigger-large-items-btn-gap: 8px !default;
126244
126247
  $ribbon-bigger-large-items-btn-size: $text-sm !default;
126245
126248
  $ribbon-bigger-large-items-btn-height: 125% !default;
126249
+ $ribbon-bigger-large-items-min-width-height: 32px !default;
126250
+ $ribbon-bigger-items-min-width-height: $text-xl;
126246
126251
  $ribbon-bigger-items-padding: 2px !default;
126247
126252
  $ribbon-bigger-items-btn-size: $text-sm !default;
126248
126253
  $ribbon-bigger-items-height: 125% !default;
@@ -126251,6 +126256,7 @@ $ribbon-bigger-items-icon-height: 20px !default;
126251
126256
  $ribbon-bigger-items-icon-size: $text-xl !default;
126252
126257
  $ribbon-bigger-items-margin: 7px !default;
126253
126258
  $ribbon-bigger-items-btn-icon-size: $text-xl !default;
126259
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
126254
126260
  $ribbon-bigger-items-checkbox-size: $text-sm !default;
126255
126261
  $ribbon-bigger-checkbox-margin: 10px 0 10px 16px !default;
126256
126262
  $ribbon-bigger-rtl-checkbox-margin: 10px 16px 10px 0 !default;
@@ -126468,6 +126474,14 @@ $ribbon-items-focus-box-shadow: none !default;
126468
126474
  line-height: $line-height;
126469
126475
  }
126470
126476
 
126477
+ @mixin ribbon-items-icon-images($items-size) {
126478
+ min-height: $items-size;
126479
+ min-width: $items-size;
126480
+ background-repeat: no-repeat;
126481
+ background-size: contain;
126482
+ background-position: center;
126483
+ }
126484
+
126471
126485
  @mixin ribbon-font-props($font-size, $line-height) {
126472
126486
  font-size: $font-size;
126473
126487
  line-height: $line-height;
@@ -127136,6 +127150,7 @@ $ribbon-items-focus-box-shadow: none !default;
127136
127150
  }
127137
127151
 
127138
127152
  .e-btn-icon:not(.e-caret) {
127153
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
127139
127154
  font-size: $ribbon-large-items-icon-size;
127140
127155
  font-weight: $ribbon-items-font-weight;
127141
127156
  padding: $ribbon-large-items-icon-padding;
@@ -127254,6 +127269,9 @@ $ribbon-items-focus-box-shadow: none !default;
127254
127269
  .e-btn-icon {
127255
127270
  @include ribbon-font-props(16px, 16px);
127256
127271
  margin: $ribbon-items-margin;
127272
+ &:not(.e-caret) {
127273
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
127274
+ }
127257
127275
  }
127258
127276
  }
127259
127277
 
@@ -127395,6 +127413,13 @@ $ribbon-items-focus-box-shadow: none !default;
127395
127413
  width: 100%;
127396
127414
  height: $ribbon-medium-item-height;
127397
127415
 
127416
+ .e-btn .e-btn-icon {
127417
+ &:not(.e-caret) {
127418
+ min-width: $ribbon-overflow-items-min-width-height;
127419
+ min-height: $ribbon-overflow-items-min-width-height;
127420
+ }
127421
+ }
127422
+
127398
127423
  .e-btn .e-btn-icon.e-icon-left {
127399
127424
  margin: 0;
127400
127425
  }
@@ -127433,7 +127458,7 @@ $ribbon-items-focus-box-shadow: none !default;
127433
127458
 
127434
127459
  &.e-ribbon-medium-item {
127435
127460
  .e-btn .e-btn-icon.e-icon-left {
127436
- padding: $ribbon-button-icon-padding;
127461
+ margin: $ribbon-button-icon-padding;
127437
127462
  }
127438
127463
 
127439
127464
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127472,7 +127497,7 @@ $ribbon-items-focus-box-shadow: none !default;
127472
127497
 
127473
127498
  &.e-ribbon-medium-item {
127474
127499
  .e-btn .e-btn-icon.e-icon-left {
127475
- padding: $ribbon-rtl-button-icon-padding;
127500
+ margin: $ribbon-rtl-button-icon-padding;
127476
127501
  }
127477
127502
 
127478
127503
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -127924,6 +127949,7 @@ $ribbon-items-focus-box-shadow: none !default;
127924
127949
  max-width: $ribbon-bigger-large-items-max-width;
127925
127950
 
127926
127951
  .e-btn-icon:not(.e-caret) {
127952
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
127927
127953
  font-size: $ribbon-bigger-large-items-icon-size;
127928
127954
  padding: $ribbon-bigger-large-items-icon-padding;
127929
127955
  }
@@ -127954,6 +127980,10 @@ $ribbon-items-focus-box-shadow: none !default;
127954
127980
  .e-btn-icon {
127955
127981
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
127956
127982
  margin: $ribbon-bigger-items-margin;
127983
+ &:not(.e-caret) {
127984
+ min-width: $ribbon-bigger-items-min-width-height;
127985
+ min-height: $ribbon-bigger-items-min-width-height;
127986
+ }
127957
127987
  }
127958
127988
  }
127959
127989
 
@@ -128010,6 +128040,10 @@ $ribbon-items-focus-box-shadow: none !default;
128010
128040
  }
128011
128041
  .e-btn .e-btn-icon {
128012
128042
  font-size: $ribbon-bigger-items-btn-icon-size;
128043
+ &:not(.e-caret) {
128044
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
128045
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
128046
+ }
128013
128047
  &.e-icon-left {
128014
128048
  margin: 0;
128015
128049
  }
@@ -128046,7 +128080,7 @@ $ribbon-items-focus-box-shadow: none !default;
128046
128080
 
128047
128081
  &.e-ribbon-medium-item {
128048
128082
  .e-btn .e-btn-icon.e-icon-left {
128049
- padding: $ribbon-bigger-button-icon-padding;
128083
+ margin: $ribbon-bigger-button-icon-padding;
128050
128084
  }
128051
128085
 
128052
128086
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -128082,7 +128116,7 @@ $ribbon-items-focus-box-shadow: none !default;
128082
128116
 
128083
128117
  &.e-ribbon-medium-item {
128084
128118
  .e-btn .e-btn-icon.e-icon-left {
128085
- padding: $ribbon-bigger-rtl-button-icon-padding;
128119
+ margin: $ribbon-bigger-rtl-button-icon-padding;
128086
128120
  }
128087
128121
 
128088
128122
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -54784,8 +54784,8 @@ $ripple-width: 32px !default;
54784
54784
  /*! TreeView icons */
54785
54785
  .e-treeview {
54786
54786
  .e-list-item {
54787
- div.e-icons.e-icon-expandable::before,
54788
- div.e-icons.e-icon-collapsible::before {
54787
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54788
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54789
54789
  content: '\e230';
54790
54790
  }
54791
54791
  }
@@ -124450,17 +124450,20 @@ $ribbon-large-items-icon-size: 32px !default;
124450
124450
  $ribbon-large-items-max-width: 10ch !default;
124451
124451
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
124452
124452
  $ribbon-large-items-btn-gap: 5px !default;
124453
+ $ribbon-large-items-min-width-height: 32px !default;
124453
124454
  $ribbon-items-border: none !default;
124454
124455
  $ribbon-items-border-radius: 2px !default;
124455
124456
  $ribbon-items-font-weight: 400 !default;
124456
124457
  $ribbon-items-btn-size: 12px !default;
124457
124458
  $ribbon-items-label-size: 12px !default;
124458
124459
  $ribbon-items-btn-icon-size: 16px !default;
124460
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124459
124461
  $ribbon-items-caret-icon-size: 12px !default;
124460
124462
  $ribbon-items-margin: 8px !default;
124461
124463
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
124462
124464
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
124463
124465
  $ribbon-items-height: 18px !default;
124466
+ $ribbon-items-min-width-height: 16px !default;
124464
124467
  $ribbon-items-checkbox-size: 12px !default;
124465
124468
  $ribbon-items-checkbox-padding: 0 8px !default;
124466
124469
  $ribbon-input-group-height: 32px !default;
@@ -124595,6 +124598,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
124595
124598
  $ribbon-bigger-large-items-btn-padding: 0 6px !default;
124596
124599
  $ribbon-bigger-large-items-btn-size: 14px !default;
124597
124600
  $ribbon-bigger-large-items-btn-height: 22px !default;
124601
+ $ribbon-bigger-large-items-min-width-height: 40px !default;
124602
+ $ribbon-bigger-items-min-width-height: 20px;
124598
124603
  $ribbon-bigger-large-items-btn-gap: 8px !default;
124599
124604
  $ribbon-bigger-items-padding: 2px !default;
124600
124605
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -124603,6 +124608,7 @@ $ribbon-bigger-items-height: 22px !default;
124603
124608
  $ribbon-bigger-items-icon-height: 20px !default;
124604
124609
  $ribbon-bigger-items-icon-size: 20px !default;
124605
124610
  $ribbon-bigger-items-btn-icon-size: 18px !default;
124611
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124606
124612
  $ribbon-bigger-items-margin: 10px !default;
124607
124613
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124608
124614
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -124821,6 +124827,14 @@ $ribbon-items-focus-box-shadow: none !default;
124821
124827
  line-height: $line-height;
124822
124828
  }
124823
124829
 
124830
+ @mixin ribbon-items-icon-images($items-size) {
124831
+ min-height: $items-size;
124832
+ min-width: $items-size;
124833
+ background-repeat: no-repeat;
124834
+ background-size: contain;
124835
+ background-position: center;
124836
+ }
124837
+
124824
124838
  @mixin ribbon-font-props($font-size, $line-height) {
124825
124839
  font-size: $font-size;
124826
124840
  line-height: $line-height;
@@ -125489,6 +125503,7 @@ $ribbon-items-focus-box-shadow: none !default;
125489
125503
  }
125490
125504
 
125491
125505
  .e-btn-icon:not(.e-caret) {
125506
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125492
125507
  font-size: $ribbon-large-items-icon-size;
125493
125508
  font-weight: $ribbon-items-font-weight;
125494
125509
  padding: $ribbon-large-items-icon-padding;
@@ -125607,6 +125622,9 @@ $ribbon-items-focus-box-shadow: none !default;
125607
125622
  .e-btn-icon {
125608
125623
  @include ribbon-font-props(16px, 16px);
125609
125624
  margin: $ribbon-items-margin;
125625
+ &:not(.e-caret) {
125626
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125627
+ }
125610
125628
  }
125611
125629
  }
125612
125630
 
@@ -125748,6 +125766,13 @@ $ribbon-items-focus-box-shadow: none !default;
125748
125766
  width: 100%;
125749
125767
  height: $ribbon-medium-item-height;
125750
125768
 
125769
+ .e-btn .e-btn-icon {
125770
+ &:not(.e-caret) {
125771
+ min-width: $ribbon-overflow-items-min-width-height;
125772
+ min-height: $ribbon-overflow-items-min-width-height;
125773
+ }
125774
+ }
125775
+
125751
125776
  .e-btn .e-btn-icon.e-icon-left {
125752
125777
  margin: 0;
125753
125778
  }
@@ -125786,7 +125811,7 @@ $ribbon-items-focus-box-shadow: none !default;
125786
125811
 
125787
125812
  &.e-ribbon-medium-item {
125788
125813
  .e-btn .e-btn-icon.e-icon-left {
125789
- padding: $ribbon-button-icon-padding;
125814
+ margin: $ribbon-button-icon-padding;
125790
125815
  }
125791
125816
 
125792
125817
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -125825,7 +125850,7 @@ $ribbon-items-focus-box-shadow: none !default;
125825
125850
 
125826
125851
  &.e-ribbon-medium-item {
125827
125852
  .e-btn .e-btn-icon.e-icon-left {
125828
- padding: $ribbon-rtl-button-icon-padding;
125853
+ margin: $ribbon-rtl-button-icon-padding;
125829
125854
  }
125830
125855
 
125831
125856
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126277,6 +126302,7 @@ $ribbon-items-focus-box-shadow: none !default;
126277
126302
  max-width: $ribbon-bigger-large-items-max-width;
126278
126303
 
126279
126304
  .e-btn-icon:not(.e-caret) {
126305
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
126280
126306
  font-size: $ribbon-bigger-large-items-icon-size;
126281
126307
  padding: $ribbon-bigger-large-items-icon-padding;
126282
126308
  }
@@ -126307,6 +126333,10 @@ $ribbon-items-focus-box-shadow: none !default;
126307
126333
  .e-btn-icon {
126308
126334
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
126309
126335
  margin: $ribbon-bigger-items-margin;
126336
+ &:not(.e-caret) {
126337
+ min-width: $ribbon-bigger-items-min-width-height;
126338
+ min-height: $ribbon-bigger-items-min-width-height;
126339
+ }
126310
126340
  }
126311
126341
  }
126312
126342
 
@@ -126363,6 +126393,10 @@ $ribbon-items-focus-box-shadow: none !default;
126363
126393
  }
126364
126394
  .e-btn .e-btn-icon {
126365
126395
  font-size: $ribbon-bigger-items-btn-icon-size;
126396
+ &:not(.e-caret) {
126397
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126398
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126399
+ }
126366
126400
  &.e-icon-left {
126367
126401
  margin: 0;
126368
126402
  }
@@ -126399,7 +126433,7 @@ $ribbon-items-focus-box-shadow: none !default;
126399
126433
 
126400
126434
  &.e-ribbon-medium-item {
126401
126435
  .e-btn .e-btn-icon.e-icon-left {
126402
- padding: $ribbon-bigger-button-icon-padding;
126436
+ margin: $ribbon-bigger-button-icon-padding;
126403
126437
  }
126404
126438
 
126405
126439
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126435,7 +126469,7 @@ $ribbon-items-focus-box-shadow: none !default;
126435
126469
 
126436
126470
  &.e-ribbon-medium-item {
126437
126471
  .e-btn .e-btn-icon.e-icon-left {
126438
- padding: $ribbon-bigger-rtl-button-icon-padding;
126472
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126439
126473
  }
126440
126474
 
126441
126475
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -54544,8 +54544,8 @@ $ripple-width: 32px !default;
54544
54544
  /*! TreeView icons */
54545
54545
  .e-treeview {
54546
54546
  .e-list-item {
54547
- div.e-icons.e-icon-expandable::before,
54548
- div.e-icons.e-icon-collapsible::before {
54547
+ div.e-icons:not(.e-icons-spinner).e-icon-expandable::before,
54548
+ div.e-icons:not(.e-icons-spinner).e-icon-collapsible::before {
54549
54549
  content: '\e230';
54550
54550
  }
54551
54551
  }
@@ -124242,17 +124242,20 @@ $ribbon-large-items-icon-size: 32px !default;
124242
124242
  $ribbon-large-items-max-width: 10ch !default;
124243
124243
  $ribbon-large-items-icon-padding: 8px 6px 6px !default;
124244
124244
  $ribbon-large-items-btn-gap: 5px !default;
124245
+ $ribbon-large-items-min-width-height: 32px !default;
124245
124246
  $ribbon-items-border: none !default;
124246
124247
  $ribbon-items-border-radius: 4px !default;
124247
124248
  $ribbon-items-font-weight: 400 !default;
124248
124249
  $ribbon-items-btn-size: 12px !default;
124249
124250
  $ribbon-items-label-size: 12px !default;
124250
124251
  $ribbon-items-btn-icon-size: 16px !default;
124252
+ $ribbon-overflow-items-min-width-height: $ribbon-items-btn-icon-size !default;
124251
124253
  $ribbon-items-caret-icon-size: 12px !default;
124252
124254
  $ribbon-items-margin: 8px !default;
124253
124255
  $ribbon-checkbox-margin: 7px 0 7px 12px !default;
124254
124256
  $ribbon-rtl-checkbox-margin: 7px 12px 7px 0 !default;
124255
124257
  $ribbon-items-height: 18px !default;
124258
+ $ribbon-items-min-width-height: 16px !default;
124256
124259
  $ribbon-items-checkbox-size: 12px !default;
124257
124260
  $ribbon-items-checkbox-padding: 0 8px !default;
124258
124261
  $ribbon-input-group-height: 32px !default;
@@ -124387,6 +124390,8 @@ $ribbon-bigger-large-items-icon-size: 40px !default;
124387
124390
  $ribbon-bigger-large-items-btn-padding: 0 5px !default;
124388
124391
  $ribbon-bigger-large-items-btn-size: 14px !default;
124389
124392
  $ribbon-bigger-large-items-btn-height: 22px !default;
124393
+ $ribbon-bigger-large-items-min-width-height: 40px !default;
124394
+ $ribbon-bigger-items-min-width-height: 20px;
124390
124395
  $ribbon-bigger-large-items-btn-gap: 9px !default;
124391
124396
  $ribbon-bigger-items-padding: 2px !default;
124392
124397
  $ribbon-bigger-items-btn-size: 14px !default;
@@ -124395,6 +124400,7 @@ $ribbon-bigger-items-height: 22px !default;
124395
124400
  $ribbon-bigger-items-icon-height: 20px !default;
124396
124401
  $ribbon-bigger-items-icon-size: 20px !default;
124397
124402
  $ribbon-bigger-items-btn-icon-size: 18px !default;
124403
+ $ribbon-bigger-overflow-items-min-width-height: $ribbon-bigger-items-btn-icon-size !default;
124398
124404
  $ribbon-bigger-items-margin: 10px !default;
124399
124405
  $ribbon-bigger-checkbox-margin: 11px 0 11px 16px !default;
124400
124406
  $ribbon-bigger-rtl-checkbox-margin: 11px 16px 11px 0 !default;
@@ -124613,6 +124619,14 @@ $ribbon-items-focus-box-shadow: none !default;
124613
124619
  line-height: $line-height;
124614
124620
  }
124615
124621
 
124622
+ @mixin ribbon-items-icon-images($items-size) {
124623
+ min-height: $items-size;
124624
+ min-width: $items-size;
124625
+ background-repeat: no-repeat;
124626
+ background-size: contain;
124627
+ background-position: center;
124628
+ }
124629
+
124616
124630
  @mixin ribbon-font-props($font-size, $line-height) {
124617
124631
  font-size: $font-size;
124618
124632
  line-height: $line-height;
@@ -125281,6 +125295,7 @@ $ribbon-items-focus-box-shadow: none !default;
125281
125295
  }
125282
125296
 
125283
125297
  .e-btn-icon:not(.e-caret) {
125298
+ @include ribbon-items-icon-images($ribbon-large-items-min-width-height);
125284
125299
  font-size: $ribbon-large-items-icon-size;
125285
125300
  font-weight: $ribbon-items-font-weight;
125286
125301
  padding: $ribbon-large-items-icon-padding;
@@ -125399,6 +125414,9 @@ $ribbon-items-focus-box-shadow: none !default;
125399
125414
  .e-btn-icon {
125400
125415
  @include ribbon-font-props(16px, 16px);
125401
125416
  margin: $ribbon-items-margin;
125417
+ &:not(.e-caret) {
125418
+ @include ribbon-items-icon-images($ribbon-items-min-width-height);
125419
+ }
125402
125420
  }
125403
125421
  }
125404
125422
 
@@ -125540,6 +125558,13 @@ $ribbon-items-focus-box-shadow: none !default;
125540
125558
  width: 100%;
125541
125559
  height: $ribbon-medium-item-height;
125542
125560
 
125561
+ .e-btn .e-btn-icon {
125562
+ &:not(.e-caret) {
125563
+ min-width: $ribbon-overflow-items-min-width-height;
125564
+ min-height: $ribbon-overflow-items-min-width-height;
125565
+ }
125566
+ }
125567
+
125543
125568
  .e-btn .e-btn-icon.e-icon-left {
125544
125569
  margin: 0;
125545
125570
  }
@@ -125578,7 +125603,7 @@ $ribbon-items-focus-box-shadow: none !default;
125578
125603
 
125579
125604
  &.e-ribbon-medium-item {
125580
125605
  .e-btn .e-btn-icon.e-icon-left {
125581
- padding: $ribbon-button-icon-padding;
125606
+ margin: $ribbon-button-icon-padding;
125582
125607
  }
125583
125608
 
125584
125609
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -125617,7 +125642,7 @@ $ribbon-items-focus-box-shadow: none !default;
125617
125642
 
125618
125643
  &.e-ribbon-medium-item {
125619
125644
  .e-btn .e-btn-icon.e-icon-left {
125620
- padding: $ribbon-rtl-button-icon-padding;
125645
+ margin: $ribbon-rtl-button-icon-padding;
125621
125646
  }
125622
125647
 
125623
125648
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126069,6 +126094,7 @@ $ribbon-items-focus-box-shadow: none !default;
126069
126094
  max-width: $ribbon-bigger-large-items-max-width;
126070
126095
 
126071
126096
  .e-btn-icon:not(.e-caret) {
126097
+ @include ribbon-items-icon-images($ribbon-bigger-large-items-min-width-height);
126072
126098
  font-size: $ribbon-bigger-large-items-icon-size;
126073
126099
  padding: $ribbon-bigger-large-items-icon-padding;
126074
126100
  }
@@ -126099,6 +126125,10 @@ $ribbon-items-focus-box-shadow: none !default;
126099
126125
  .e-btn-icon {
126100
126126
  @include ribbon-font-props($ribbon-bigger-items-icon-size, $ribbon-bigger-items-icon-height);
126101
126127
  margin: $ribbon-bigger-items-margin;
126128
+ &:not(.e-caret) {
126129
+ min-width: $ribbon-bigger-items-min-width-height;
126130
+ min-height: $ribbon-bigger-items-min-width-height;
126131
+ }
126102
126132
  }
126103
126133
  }
126104
126134
 
@@ -126155,6 +126185,10 @@ $ribbon-items-focus-box-shadow: none !default;
126155
126185
  }
126156
126186
  .e-btn .e-btn-icon {
126157
126187
  font-size: $ribbon-bigger-items-btn-icon-size;
126188
+ &:not(.e-caret) {
126189
+ min-width: $ribbon-bigger-overflow-items-min-width-height;
126190
+ min-height: $ribbon-bigger-overflow-items-min-width-height;
126191
+ }
126158
126192
  &.e-icon-left {
126159
126193
  margin: 0;
126160
126194
  }
@@ -126191,7 +126225,7 @@ $ribbon-items-focus-box-shadow: none !default;
126191
126225
 
126192
126226
  &.e-ribbon-medium-item {
126193
126227
  .e-btn .e-btn-icon.e-icon-left {
126194
- padding: $ribbon-bigger-button-icon-padding;
126228
+ margin: $ribbon-bigger-button-icon-padding;
126195
126229
  }
126196
126230
 
126197
126231
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {
@@ -126227,7 +126261,7 @@ $ribbon-items-focus-box-shadow: none !default;
126227
126261
 
126228
126262
  &.e-ribbon-medium-item {
126229
126263
  .e-btn .e-btn-icon.e-icon-left {
126230
- padding: $ribbon-bigger-rtl-button-icon-padding;
126264
+ margin: $ribbon-bigger-rtl-button-icon-padding;
126231
126265
  }
126232
126266
 
126233
126267
  &:not(:has(.e-colorpicker-wrapper)) .e-btn {