@syncfusion/blazor-themes 24.1.43 → 24.1.44

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 (101) hide show
  1. package/SCSS-Themes/bootstrap-dark.scss +89 -6
  2. package/SCSS-Themes/bootstrap.scss +89 -6
  3. package/SCSS-Themes/bootstrap4.scss +89 -6
  4. package/SCSS-Themes/bootstrap5-dark.scss +89 -6
  5. package/SCSS-Themes/bootstrap5.scss +89 -6
  6. package/SCSS-Themes/buttons/button/bootstrap-dark.scss +52 -0
  7. package/SCSS-Themes/buttons/button/bootstrap.scss +52 -0
  8. package/SCSS-Themes/buttons/button/bootstrap4.scss +52 -0
  9. package/SCSS-Themes/buttons/button/bootstrap5-dark.scss +52 -0
  10. package/SCSS-Themes/buttons/button/bootstrap5.scss +52 -0
  11. package/SCSS-Themes/buttons/button/fabric-dark.scss +52 -0
  12. package/SCSS-Themes/buttons/button/fabric.scss +52 -0
  13. package/SCSS-Themes/buttons/button/fluent-dark.scss +52 -0
  14. package/SCSS-Themes/buttons/button/fluent.scss +52 -0
  15. package/SCSS-Themes/buttons/button/highcontrast.scss +52 -0
  16. package/SCSS-Themes/buttons/button/material-dark.scss +52 -0
  17. package/SCSS-Themes/buttons/button/material.scss +52 -0
  18. package/SCSS-Themes/buttons/button/material3-dark.scss +52 -0
  19. package/SCSS-Themes/buttons/button/material3.scss +52 -0
  20. package/SCSS-Themes/buttons/button/tailwind-dark.scss +52 -0
  21. package/SCSS-Themes/buttons/button/tailwind.scss +52 -0
  22. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap-dark.scss +5 -0
  23. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap.scss +5 -0
  24. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap4.scss +5 -0
  25. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5-dark.scss +5 -0
  26. package/SCSS-Themes/dropdowns/drop-down-tree/bootstrap5.scss +5 -0
  27. package/SCSS-Themes/dropdowns/drop-down-tree/fabric-dark.scss +5 -0
  28. package/SCSS-Themes/dropdowns/drop-down-tree/fabric.scss +5 -0
  29. package/SCSS-Themes/dropdowns/drop-down-tree/fluent-dark.scss +5 -0
  30. package/SCSS-Themes/dropdowns/drop-down-tree/fluent.scss +5 -0
  31. package/SCSS-Themes/dropdowns/drop-down-tree/highcontrast.scss +5 -0
  32. package/SCSS-Themes/dropdowns/drop-down-tree/material-dark.scss +5 -0
  33. package/SCSS-Themes/dropdowns/drop-down-tree/material.scss +5 -0
  34. package/SCSS-Themes/dropdowns/drop-down-tree/material3-dark.scss +5 -0
  35. package/SCSS-Themes/dropdowns/drop-down-tree/material3.scss +5 -0
  36. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind-dark.scss +5 -0
  37. package/SCSS-Themes/dropdowns/drop-down-tree/tailwind.scss +5 -0
  38. package/SCSS-Themes/fabric-dark.scss +89 -6
  39. package/SCSS-Themes/fabric.scss +89 -6
  40. package/SCSS-Themes/fluent-dark.scss +90 -7
  41. package/SCSS-Themes/fluent.scss +90 -7
  42. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +9 -0
  43. package/SCSS-Themes/grids/grid/bootstrap.scss +9 -0
  44. package/SCSS-Themes/grids/grid/bootstrap4.scss +9 -0
  45. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +9 -0
  46. package/SCSS-Themes/grids/grid/bootstrap5.scss +9 -0
  47. package/SCSS-Themes/grids/grid/fabric-dark.scss +9 -0
  48. package/SCSS-Themes/grids/grid/fabric.scss +9 -0
  49. package/SCSS-Themes/grids/grid/fluent-dark.scss +9 -0
  50. package/SCSS-Themes/grids/grid/fluent.scss +9 -0
  51. package/SCSS-Themes/grids/grid/highcontrast.scss +9 -0
  52. package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
  53. package/SCSS-Themes/grids/grid/material.scss +9 -0
  54. package/SCSS-Themes/grids/grid/material3-dark.scss +9 -0
  55. package/SCSS-Themes/grids/grid/material3.scss +9 -0
  56. package/SCSS-Themes/grids/grid/tailwind-dark.scss +9 -0
  57. package/SCSS-Themes/grids/grid/tailwind.scss +9 -0
  58. package/SCSS-Themes/highcontrast.scss +89 -6
  59. package/SCSS-Themes/image-editor/image-editor/bootstrap-dark.scss +9 -6
  60. package/SCSS-Themes/image-editor/image-editor/bootstrap.scss +9 -6
  61. package/SCSS-Themes/image-editor/image-editor/bootstrap4.scss +9 -6
  62. package/SCSS-Themes/image-editor/image-editor/bootstrap5-dark.scss +9 -6
  63. package/SCSS-Themes/image-editor/image-editor/bootstrap5.scss +9 -6
  64. package/SCSS-Themes/image-editor/image-editor/fabric-dark.scss +9 -6
  65. package/SCSS-Themes/image-editor/image-editor/fabric.scss +9 -6
  66. package/SCSS-Themes/image-editor/image-editor/fluent-dark.scss +9 -6
  67. package/SCSS-Themes/image-editor/image-editor/fluent.scss +9 -6
  68. package/SCSS-Themes/image-editor/image-editor/highcontrast.scss +9 -6
  69. package/SCSS-Themes/image-editor/image-editor/material-dark.scss +9 -6
  70. package/SCSS-Themes/image-editor/image-editor/material.scss +9 -6
  71. package/SCSS-Themes/image-editor/image-editor/material3-dark.scss +9 -6
  72. package/SCSS-Themes/image-editor/image-editor/material3.scss +9 -6
  73. package/SCSS-Themes/image-editor/image-editor/tailwind-dark.scss +9 -6
  74. package/SCSS-Themes/image-editor/image-editor/tailwind.scss +9 -6
  75. package/SCSS-Themes/inputs/data-form/material3-dark.scss +1 -1
  76. package/SCSS-Themes/inputs/data-form/material3.scss +1 -1
  77. package/SCSS-Themes/material-dark.scss +90 -7
  78. package/SCSS-Themes/material.scss +89 -6
  79. package/SCSS-Themes/material3-dark.scss +90 -7
  80. package/SCSS-Themes/material3.scss +90 -7
  81. package/SCSS-Themes/pdfviewer/pdfviewer/fluent-dark.scss +1 -1
  82. package/SCSS-Themes/pdfviewer/pdfviewer/fluent.scss +1 -1
  83. package/SCSS-Themes/splitbuttons/progress-button/bootstrap-dark.scss +14 -0
  84. package/SCSS-Themes/splitbuttons/progress-button/bootstrap.scss +14 -0
  85. package/SCSS-Themes/splitbuttons/progress-button/bootstrap4.scss +14 -0
  86. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5-dark.scss +14 -0
  87. package/SCSS-Themes/splitbuttons/progress-button/bootstrap5.scss +14 -0
  88. package/SCSS-Themes/splitbuttons/progress-button/fabric-dark.scss +14 -0
  89. package/SCSS-Themes/splitbuttons/progress-button/fabric.scss +14 -0
  90. package/SCSS-Themes/splitbuttons/progress-button/fluent-dark.scss +14 -0
  91. package/SCSS-Themes/splitbuttons/progress-button/fluent.scss +14 -0
  92. package/SCSS-Themes/splitbuttons/progress-button/highcontrast.scss +14 -0
  93. package/SCSS-Themes/splitbuttons/progress-button/material-dark.scss +14 -0
  94. package/SCSS-Themes/splitbuttons/progress-button/material.scss +14 -0
  95. package/SCSS-Themes/splitbuttons/progress-button/material3-dark.scss +14 -0
  96. package/SCSS-Themes/splitbuttons/progress-button/material3.scss +14 -0
  97. package/SCSS-Themes/splitbuttons/progress-button/tailwind-dark.scss +14 -0
  98. package/SCSS-Themes/splitbuttons/progress-button/tailwind.scss +14 -0
  99. package/SCSS-Themes/tailwind-dark.scss +89 -6
  100. package/SCSS-Themes/tailwind.scss +89 -6
  101. package/package.json +1 -1
@@ -24911,12 +24911,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24911
24911
  @if $skin-name == 'FluentUI' {
24912
24912
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24913
24913
  }
24914
+
24915
+ @if $skin-name == 'bootstrap5' {
24916
+ background: $btn-outline-active-bgcolor;
24917
+ color: $btn-outline-active-color;
24918
+ }
24914
24919
  }
24915
24920
 
24916
24921
  &:focus-visible { // only for keybord
24917
24922
  @if $skin-name == 'FluentUI' {
24918
24923
  background: $btn-outline-bgcolor;
24919
24924
  }
24925
+
24926
+ @if $skin-name == 'bootstrap5' {
24927
+ box-shadow: $btn-focus-box-shadow;
24928
+ }
24929
+
24920
24930
  @if $skin-name == 'Material3' {
24921
24931
  background: $btn-active-bgcolor;
24922
24932
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -24967,12 +24977,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24967
24977
  @if $skin-name == 'FluentUI' {
24968
24978
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24969
24979
  }
24980
+
24981
+ @if $skin-name == 'bootstrap5' {
24982
+ background: $btn-outline-primary-focus-bgcolor;
24983
+ color: $btn-outline-active-color;
24984
+ }
24970
24985
  }
24971
24986
 
24972
24987
  &:focus-visible { // only for keybord
24973
24988
  @if $skin-name == 'FluentUI' {
24974
24989
  background: $btn-outline-bgcolor;
24975
24990
  }
24991
+
24992
+ @if $skin-name == 'bootstrap5' {
24993
+ box-shadow: $btn-primary-focus-box-shadow;
24994
+ }
24995
+
24976
24996
  @if $skin-name == 'Material3' {
24977
24997
  background: $btn-primary-active-bgcolor;
24978
24998
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25030,12 +25050,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25030
25050
  @if $skin-name == 'FluentUI' {
25031
25051
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25032
25052
  }
25053
+
25054
+ @if $skin-name == 'bootstrap5' {
25055
+ background: $btn-success-bgcolor;
25056
+ color: $btn-success-color;
25057
+ }
25033
25058
  }
25034
25059
 
25035
25060
  &:focus-visible { // only for keybord
25036
25061
  @if $skin-name == 'FluentUI' {
25037
25062
  background: $btn-outline-bgcolor;
25038
25063
  }
25064
+ @if $skin-name == 'bootstrap5' {
25065
+ box-shadow: $btn-success-focus-box-shadow;
25066
+ }
25039
25067
  @if $skin-name == 'Material3' {
25040
25068
  background: $btn-success-active-bgcolor;
25041
25069
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25093,12 +25121,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25093
25121
  @if $skin-name == 'FluentUI' {
25094
25122
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25095
25123
  }
25124
+
25125
+ @if $skin-name == 'bootstrap5' {
25126
+ background: $btn-info-bgcolor;
25127
+ color: $btn-info-color;
25128
+ }
25096
25129
  }
25097
25130
 
25098
25131
  &:focus-visible { // only for keybord
25099
25132
  @if $skin-name == 'FluentUI' {
25100
25133
  background: $btn-outline-bgcolor;
25101
25134
  }
25135
+ @if $skin-name == 'bootstrap5' {
25136
+ box-shadow: $btn-info-focus-box-shadow;
25137
+ }
25102
25138
  @if $skin-name == 'Material3' {
25103
25139
  background: $btn-info-active-bgcolor;
25104
25140
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25156,12 +25192,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25156
25192
  @if $skin-name == 'FluentUI' {
25157
25193
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25158
25194
  }
25195
+
25196
+ @if $skin-name == 'bootstrap5' {
25197
+ background: $btn-warning-bgcolor;
25198
+ color: $btn-warning-color;
25199
+ }
25159
25200
  }
25160
25201
 
25161
25202
  &:focus-visible { // only for keybord
25162
25203
  @if $skin-name == 'FluentUI' {
25163
25204
  background: $btn-outline-bgcolor;
25164
25205
  }
25206
+ @if $skin-name == 'bootstrap5' {
25207
+ box-shadow: $btn-warning-focus-box-shadow;
25208
+ }
25165
25209
  @if $skin-name == 'Material3' {
25166
25210
  background: $btn-warning-active-bgcolor;
25167
25211
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25219,12 +25263,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25219
25263
  @if $skin-name == 'FluentUI' {
25220
25264
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25221
25265
  }
25266
+
25267
+ @if $skin-name == 'bootstrap5' {
25268
+ background: $btn-danger-bgcolor;
25269
+ color: $btn-danger-color;
25270
+ }
25222
25271
  }
25223
25272
 
25224
25273
  &:focus-visible { // only for keybord
25225
25274
  @if $skin-name == 'FluentUI' {
25226
25275
  background: $btn-outline-bgcolor;
25227
25276
  }
25277
+ @if $skin-name == 'bootstrap5' {
25278
+ box-shadow: $btn-danger-focus-box-shadow;
25279
+ }
25228
25280
  @if $skin-name == 'Material3' {
25229
25281
  background: $btn-danger-active-bgcolor;
25230
25282
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59626,6 +59678,11 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
59626
59678
  }
59627
59679
  }
59628
59680
 
59681
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59682
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59683
+ display: flex;
59684
+ }
59685
+
59629
59686
  .e-chips-wrapper {
59630
59687
  width: 100%;
59631
59688
  }
@@ -84148,6 +84205,15 @@ margin: $grid-group-animator-cell-margin;
84148
84205
  color: $grid-cell-selection-color;
84149
84206
  }
84150
84207
 
84208
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
84209
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
84210
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
84211
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
84212
+ @if $grid-skin == 'material3' {
84213
+ background-color: rgba($primary-container, 1);
84214
+ }
84215
+ }
84216
+
84151
84217
  .e-filterbarcell,
84152
84218
  .e-filterbarcelldisabled {
84153
84219
  background-color: $grid-header-bg-color;
@@ -87798,7 +87864,7 @@ $form-group-title-border-height: 1px !default;
87798
87864
  $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
87799
87865
 
87800
87866
  //tooltip styles
87801
- $form-tooltip-background-color: $danger-light !default;
87867
+ $form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
87802
87868
  $form-tooltip-color: var(--danger, #b3261e) !default;
87803
87869
  $form-validation-message-font-size: 12px;
87804
87870
 
@@ -90542,6 +90608,20 @@ $btn-flat-primary-path-arc: rgba($white);
90542
90608
  }
90543
90609
  }
90544
90610
 
90611
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
90612
+ fill: $btn-outline-color;
90613
+ stroke: $btn-outline-color;
90614
+ }
90615
+
90616
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
90617
+ fill: $btn-color;
90618
+ stroke: $btn-color;
90619
+ }
90620
+
90621
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
90622
+ stroke: $btn-outline-color;
90623
+ }
90624
+
90545
90625
 
90546
90626
 
90547
90627
 
@@ -122961,18 +123041,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
122961
123041
  }
122962
123042
  }
122963
123043
  .e-ie-straighten-value-span,
122964
- .e-ie-straighten-span {
122965
- font-size: 14px;
123044
+ .e-ie-straighten-span,
123045
+ .e-ie-toolbar-straighten {
123046
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
122966
123047
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
122967
123048
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
122968
123049
  }
122969
123050
 
122970
123051
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
122971
123052
  height: auto;
122972
- @if $skin-name == 'Material3' {
122973
- margin-left: 8px;
122974
- padding-right: 2px;
122975
- }
123053
+ margin-left: 8px;
123054
+ padding-right: 2px;
122976
123055
  }
122977
123056
 
122978
123057
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -122992,6 +123071,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
122992
123071
  }
122993
123072
  }
122994
123073
 
123074
+ .e-ie-finetune-value-span {
123075
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
123076
+ }
123077
+
122995
123078
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
122996
123079
  @if $skin-name == 'Material3' {
122997
123080
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -24994,12 +24994,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
24994
24994
  @if $skin-name == 'FluentUI' {
24995
24995
  outline: none !important; /* stylelint-disable-line declaration-no-important */
24996
24996
  }
24997
+
24998
+ @if $skin-name == 'bootstrap5' {
24999
+ background: $btn-outline-active-bgcolor;
25000
+ color: $btn-outline-active-color;
25001
+ }
24997
25002
  }
24998
25003
 
24999
25004
  &:focus-visible { // only for keybord
25000
25005
  @if $skin-name == 'FluentUI' {
25001
25006
  background: $btn-outline-bgcolor;
25002
25007
  }
25008
+
25009
+ @if $skin-name == 'bootstrap5' {
25010
+ box-shadow: $btn-focus-box-shadow;
25011
+ }
25012
+
25003
25013
  @if $skin-name == 'Material3' {
25004
25014
  background: $btn-active-bgcolor;
25005
25015
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25050,12 +25060,22 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25050
25060
  @if $skin-name == 'FluentUI' {
25051
25061
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25052
25062
  }
25063
+
25064
+ @if $skin-name == 'bootstrap5' {
25065
+ background: $btn-outline-primary-focus-bgcolor;
25066
+ color: $btn-outline-active-color;
25067
+ }
25053
25068
  }
25054
25069
 
25055
25070
  &:focus-visible { // only for keybord
25056
25071
  @if $skin-name == 'FluentUI' {
25057
25072
  background: $btn-outline-bgcolor;
25058
25073
  }
25074
+
25075
+ @if $skin-name == 'bootstrap5' {
25076
+ box-shadow: $btn-primary-focus-box-shadow;
25077
+ }
25078
+
25059
25079
  @if $skin-name == 'Material3' {
25060
25080
  background: $btn-primary-active-bgcolor;
25061
25081
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25113,12 +25133,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25113
25133
  @if $skin-name == 'FluentUI' {
25114
25134
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25115
25135
  }
25136
+
25137
+ @if $skin-name == 'bootstrap5' {
25138
+ background: $btn-success-bgcolor;
25139
+ color: $btn-success-color;
25140
+ }
25116
25141
  }
25117
25142
 
25118
25143
  &:focus-visible { // only for keybord
25119
25144
  @if $skin-name == 'FluentUI' {
25120
25145
  background: $btn-outline-bgcolor;
25121
25146
  }
25147
+ @if $skin-name == 'bootstrap5' {
25148
+ box-shadow: $btn-success-focus-box-shadow;
25149
+ }
25122
25150
  @if $skin-name == 'Material3' {
25123
25151
  background: $btn-success-active-bgcolor;
25124
25152
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25176,12 +25204,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25176
25204
  @if $skin-name == 'FluentUI' {
25177
25205
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25178
25206
  }
25207
+
25208
+ @if $skin-name == 'bootstrap5' {
25209
+ background: $btn-info-bgcolor;
25210
+ color: $btn-info-color;
25211
+ }
25179
25212
  }
25180
25213
 
25181
25214
  &:focus-visible { // only for keybord
25182
25215
  @if $skin-name == 'FluentUI' {
25183
25216
  background: $btn-outline-bgcolor;
25184
25217
  }
25218
+ @if $skin-name == 'bootstrap5' {
25219
+ box-shadow: $btn-info-focus-box-shadow;
25220
+ }
25185
25221
  @if $skin-name == 'Material3' {
25186
25222
  background: $btn-info-active-bgcolor;
25187
25223
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25239,12 +25275,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25239
25275
  @if $skin-name == 'FluentUI' {
25240
25276
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25241
25277
  }
25278
+
25279
+ @if $skin-name == 'bootstrap5' {
25280
+ background: $btn-warning-bgcolor;
25281
+ color: $btn-warning-color;
25282
+ }
25242
25283
  }
25243
25284
 
25244
25285
  &:focus-visible { // only for keybord
25245
25286
  @if $skin-name == 'FluentUI' {
25246
25287
  background: $btn-outline-bgcolor;
25247
25288
  }
25289
+ @if $skin-name == 'bootstrap5' {
25290
+ box-shadow: $btn-warning-focus-box-shadow;
25291
+ }
25248
25292
  @if $skin-name == 'Material3' {
25249
25293
  background: $btn-warning-active-bgcolor;
25250
25294
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -25302,12 +25346,20 @@ $btn-keyboard-focus-box-shadow: $shadow-focus-ring1 !default;
25302
25346
  @if $skin-name == 'FluentUI' {
25303
25347
  outline: none !important; /* stylelint-disable-line declaration-no-important */
25304
25348
  }
25349
+
25350
+ @if $skin-name == 'bootstrap5' {
25351
+ background: $btn-danger-bgcolor;
25352
+ color: $btn-danger-color;
25353
+ }
25305
25354
  }
25306
25355
 
25307
25356
  &:focus-visible { // only for keybord
25308
25357
  @if $skin-name == 'FluentUI' {
25309
25358
  background: $btn-outline-bgcolor;
25310
25359
  }
25360
+ @if $skin-name == 'bootstrap5' {
25361
+ box-shadow: $btn-danger-focus-box-shadow;
25362
+ }
25311
25363
  @if $skin-name == 'Material3' {
25312
25364
  background: $btn-danger-active-bgcolor;
25313
25365
  box-shadow: $btn-keyboard-focus-box-shadow;
@@ -59709,6 +59761,11 @@ $ddt-readonly-input-bg-color: rgba($content-bg-color) !default;
59709
59761
  }
59710
59762
  }
59711
59763
 
59764
+ &.e-input-group.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon,
59765
+ &.e-float-input.e-control-wrapper.e-valid-input:hover:not(.e-disabled) .e-clear-icon {
59766
+ display: flex;
59767
+ }
59768
+
59712
59769
  .e-chips-wrapper {
59713
59770
  width: 100%;
59714
59771
  }
@@ -84231,6 +84288,15 @@ margin: $grid-group-animator-cell-margin;
84231
84288
  color: $grid-cell-selection-color;
84232
84289
  }
84233
84290
 
84291
+ td.e-cellselectionbackground.e-leftfreeze:not(.e-updatedtd),
84292
+ td.e-cellselectionbackground.e-unfreeze:not(.e-updatedtd),
84293
+ td.e-cellselectionbackground.e-rightfreeze:not(.e-updatedtd),
84294
+ td.e-cellselectionbackground.e-fixedfreeze:not(.e-updatedtd) {
84295
+ @if $grid-skin == 'material3' {
84296
+ background-color: rgba($primary-container, 1);
84297
+ }
84298
+ }
84299
+
84234
84300
  .e-filterbarcell,
84235
84301
  .e-filterbarcelldisabled {
84236
84302
  background-color: $grid-header-bg-color;
@@ -87881,7 +87947,7 @@ $form-group-title-border-height: 1px !default;
87881
87947
  $form-group-title-border-bottom-style: 1px solid $group-title-border-color !default;
87882
87948
 
87883
87949
  //tooltip styles
87884
- $form-tooltip-background-color: $danger-light !default;
87950
+ $form-tooltip-background-color: var(--danger-light, #f9dedc) !default;
87885
87951
  $form-tooltip-color: var(--danger, #b3261e) !default;
87886
87952
  $form-validation-message-font-size: 12px;
87887
87953
 
@@ -90625,6 +90691,20 @@ $btn-flat-primary-path-arc: rgba($white);
90625
90691
  }
90626
90692
  }
90627
90693
 
90694
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
90695
+ fill: $btn-outline-color;
90696
+ stroke: $btn-outline-color;
90697
+ }
90698
+
90699
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
90700
+ fill: $btn-color;
90701
+ stroke: $btn-color;
90702
+ }
90703
+
90704
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
90705
+ stroke: $btn-outline-color;
90706
+ }
90707
+
90628
90708
 
90629
90709
 
90630
90710
 
@@ -123044,18 +123124,17 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
123044
123124
  }
123045
123125
  }
123046
123126
  .e-ie-straighten-value-span,
123047
- .e-ie-straighten-span {
123048
- font-size: 14px;
123127
+ .e-ie-straighten-span,
123128
+ .e-ie-toolbar-straighten {
123129
+ font-size: 14px !important; /* stylelint-disable-line declaration-no-important */
123049
123130
  padding-left: 10px !important; /* stylelint-disable-line declaration-no-important */
123050
123131
  padding-right: 10px !important; /* stylelint-disable-line declaration-no-important */
123051
123132
  }
123052
123133
 
123053
123134
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal {
123054
123135
  height: auto;
123055
- @if $skin-name == 'Material3' {
123056
- margin-left: 8px;
123057
- padding-right: 2px;
123058
- }
123136
+ margin-left: 8px;
123137
+ padding-right: 2px;
123059
123138
  }
123060
123139
 
123061
123140
  .e-straighten .e-control-wrapper.e-slider-container.e-horizontal .e-slider {
@@ -123075,6 +123154,10 @@ $image-editor-device-slider-handler: calc(50% - 8px) !default;
123075
123154
  }
123076
123155
  }
123077
123156
 
123157
+ .e-ie-finetune-value-span {
123158
+ top: 26% !important; /* stylelint-disable-line declaration-no-important */
123159
+ }
123160
+
123078
123161
  .e-bigger .e-straighten .e-control-wrapper.e-slider-container .e-slider .e-handle {
123079
123162
  @if $skin-name == 'Material3' {
123080
123163
  height: 22px !important; /* stylelint-disable-line declaration-no-important */
@@ -5800,7 +5800,7 @@ $pv-comment-text-cursor-color: $black !default;
5800
5800
  }
5801
5801
 
5802
5802
  .e-pv-search-close::before {
5803
- content: '\e754';
5803
+ content: '\e7e7';
5804
5804
  font-family: 'e-icons';
5805
5805
  }
5806
5806
 
@@ -5800,7 +5800,7 @@ $pv-comment-text-cursor-color: $black !default;
5800
5800
  }
5801
5801
 
5802
5802
  .e-pv-search-close::before {
5803
- content: '\e754';
5803
+ content: '\e7e7';
5804
5804
  font-family: 'e-icons';
5805
5805
  }
5806
5806
 
@@ -1066,3 +1066,17 @@ $btn-flat-primary-path-arc: none;
1066
1066
  }
1067
1067
  }
1068
1068
 
1069
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1070
+ fill: $btn-outline-color;
1071
+ stroke: $btn-outline-color;
1072
+ }
1073
+
1074
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1075
+ fill: $btn-color;
1076
+ stroke: $btn-color;
1077
+ }
1078
+
1079
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1080
+ stroke: $btn-outline-color;
1081
+ }
1082
+
@@ -1063,3 +1063,17 @@ $btn-flat-primary-path-arc: none;
1063
1063
  }
1064
1064
  }
1065
1065
 
1066
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1067
+ fill: $btn-outline-color;
1068
+ stroke: $btn-outline-color;
1069
+ }
1070
+
1071
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1072
+ fill: $btn-color;
1073
+ stroke: $btn-color;
1074
+ }
1075
+
1076
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1077
+ stroke: $btn-outline-color;
1078
+ }
1079
+
@@ -1063,3 +1063,17 @@ $btn-flat-primary-path-arc: none;
1063
1063
  }
1064
1064
  }
1065
1065
 
1066
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1067
+ fill: $btn-outline-color;
1068
+ stroke: $btn-outline-color;
1069
+ }
1070
+
1071
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1072
+ fill: $btn-color;
1073
+ stroke: $btn-color;
1074
+ }
1075
+
1076
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1077
+ stroke: $btn-outline-color;
1078
+ }
1079
+
@@ -1060,3 +1060,17 @@ $btn-flat-primary-path-arc: $white;
1060
1060
  }
1061
1061
  }
1062
1062
 
1063
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1064
+ fill: $btn-outline-color;
1065
+ stroke: $btn-outline-color;
1066
+ }
1067
+
1068
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1069
+ fill: $btn-color;
1070
+ stroke: $btn-color;
1071
+ }
1072
+
1073
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1074
+ stroke: $btn-outline-color;
1075
+ }
1076
+
@@ -1060,3 +1060,17 @@ $btn-flat-primary-path-arc: $white;
1060
1060
  }
1061
1061
  }
1062
1062
 
1063
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1064
+ fill: $btn-outline-color;
1065
+ stroke: $btn-outline-color;
1066
+ }
1067
+
1068
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1069
+ fill: $btn-color;
1070
+ stroke: $btn-color;
1071
+ }
1072
+
1073
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1074
+ stroke: $btn-outline-color;
1075
+ }
1076
+
@@ -1066,3 +1066,17 @@ $btn-flat-primary-path-arc: none;
1066
1066
  }
1067
1067
  }
1068
1068
 
1069
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1070
+ fill: $btn-outline-color;
1071
+ stroke: $btn-outline-color;
1072
+ }
1073
+
1074
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1075
+ fill: $btn-color;
1076
+ stroke: $btn-color;
1077
+ }
1078
+
1079
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1080
+ stroke: $btn-outline-color;
1081
+ }
1082
+
@@ -1063,3 +1063,17 @@ $btn-flat-primary-path-arc: none;
1063
1063
  }
1064
1064
  }
1065
1065
 
1066
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1067
+ fill: $btn-outline-color;
1068
+ stroke: $btn-outline-color;
1069
+ }
1070
+
1071
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1072
+ fill: $btn-color;
1073
+ stroke: $btn-color;
1074
+ }
1075
+
1076
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1077
+ stroke: $btn-outline-color;
1078
+ }
1079
+
@@ -1060,3 +1060,17 @@ $btn-flat-primary-path-arc: $white;
1060
1060
  }
1061
1061
  }
1062
1062
 
1063
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1064
+ fill: $btn-outline-color;
1065
+ stroke: $btn-outline-color;
1066
+ }
1067
+
1068
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1069
+ fill: $btn-color;
1070
+ stroke: $btn-color;
1071
+ }
1072
+
1073
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1074
+ stroke: $btn-outline-color;
1075
+ }
1076
+
@@ -1060,3 +1060,17 @@ $btn-flat-primary-path-arc: $white;
1060
1060
  }
1061
1061
  }
1062
1062
 
1063
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1064
+ fill: $btn-outline-color;
1065
+ stroke: $btn-outline-color;
1066
+ }
1067
+
1068
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1069
+ fill: $btn-color;
1070
+ stroke: $btn-color;
1071
+ }
1072
+
1073
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1074
+ stroke: $btn-outline-color;
1075
+ }
1076
+
@@ -1063,3 +1063,17 @@ $btn-flat-primary-path-arc: none;
1063
1063
  }
1064
1064
  }
1065
1065
 
1066
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1067
+ fill: $btn-outline-color;
1068
+ stroke: $btn-outline-color;
1069
+ }
1070
+
1071
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1072
+ fill: $btn-color;
1073
+ stroke: $btn-color;
1074
+ }
1075
+
1076
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1077
+ stroke: $btn-outline-color;
1078
+ }
1079
+
@@ -1066,3 +1066,17 @@ $btn-flat-primary-path-arc: none;
1066
1066
  }
1067
1067
  }
1068
1068
 
1069
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1070
+ fill: $btn-outline-color;
1071
+ stroke: $btn-outline-color;
1072
+ }
1073
+
1074
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1075
+ fill: $btn-color;
1076
+ stroke: $btn-color;
1077
+ }
1078
+
1079
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1080
+ stroke: $btn-outline-color;
1081
+ }
1082
+
@@ -1063,3 +1063,17 @@ $btn-flat-primary-path-arc: none;
1063
1063
  }
1064
1064
  }
1065
1065
 
1066
+ .e-progress-btn.e-outline .e-spinner-pane .e-spinner-inner svg {
1067
+ fill: $btn-outline-color;
1068
+ stroke: $btn-outline-color;
1069
+ }
1070
+
1071
+ .e-progress-btn.e-outline:focus .e-spinner-pane .e-spinner-inner svg {
1072
+ fill: $btn-color;
1073
+ stroke: $btn-color;
1074
+ }
1075
+
1076
+ .e-progress-btn.e-outline.e-success .e-spinner-pane .e-spinner-inner svg .e-path-arc {
1077
+ stroke: $btn-outline-color;
1078
+ }
1079
+