@syncfusion/blazor-themes 26.2.12 → 26.2.13

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 (41) hide show
  1. package/SCSS-Themes/bds-dark.scss +6 -3
  2. package/SCSS-Themes/bds.scss +6 -3
  3. package/SCSS-Themes/bootstrap-dark.scss +7 -4
  4. package/SCSS-Themes/bootstrap.scss +7 -4
  5. package/SCSS-Themes/bootstrap4.scss +7 -4
  6. package/SCSS-Themes/bootstrap5-dark.scss +7 -4
  7. package/SCSS-Themes/bootstrap5.scss +7 -4
  8. package/SCSS-Themes/fabric-dark.scss +7 -4
  9. package/SCSS-Themes/fabric.scss +7 -4
  10. package/SCSS-Themes/fluent-dark.scss +7 -4
  11. package/SCSS-Themes/fluent.scss +7 -4
  12. package/SCSS-Themes/fluent2-dark.scss +7 -4
  13. package/SCSS-Themes/fluent2.scss +7 -4
  14. package/SCSS-Themes/grids/grid/bds-dark.scss +6 -3
  15. package/SCSS-Themes/grids/grid/bds.scss +6 -3
  16. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +7 -4
  17. package/SCSS-Themes/grids/grid/bootstrap.scss +7 -4
  18. package/SCSS-Themes/grids/grid/bootstrap4.scss +7 -4
  19. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +7 -4
  20. package/SCSS-Themes/grids/grid/bootstrap5.scss +7 -4
  21. package/SCSS-Themes/grids/grid/fabric-dark.scss +7 -4
  22. package/SCSS-Themes/grids/grid/fabric.scss +7 -4
  23. package/SCSS-Themes/grids/grid/fluent-dark.scss +7 -4
  24. package/SCSS-Themes/grids/grid/fluent.scss +7 -4
  25. package/SCSS-Themes/grids/grid/fluent2-dark.scss +7 -4
  26. package/SCSS-Themes/grids/grid/fluent2.scss +7 -4
  27. package/SCSS-Themes/grids/grid/highcontrast.scss +7 -4
  28. package/SCSS-Themes/grids/grid/material-dark.scss +7 -4
  29. package/SCSS-Themes/grids/grid/material.scss +8 -5
  30. package/SCSS-Themes/grids/grid/material3-dark.scss +7 -4
  31. package/SCSS-Themes/grids/grid/material3.scss +7 -4
  32. package/SCSS-Themes/grids/grid/tailwind-dark.scss +7 -4
  33. package/SCSS-Themes/grids/grid/tailwind.scss +7 -4
  34. package/SCSS-Themes/highcontrast.scss +7 -4
  35. package/SCSS-Themes/material-dark.scss +7 -4
  36. package/SCSS-Themes/material.scss +8 -5
  37. package/SCSS-Themes/material3-dark.scss +7 -4
  38. package/SCSS-Themes/material3.scss +7 -4
  39. package/SCSS-Themes/tailwind-dark.scss +7 -4
  40. package/SCSS-Themes/tailwind.scss +7 -4
  41. package/package.json +1 -1
package/SCSS-Themes/grids/grid/bootstrap.scss CHANGED
@@ -244,7 +244,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
244
244
  $grid-res-toolbar-clear-icon-margin: 0 !default;
245
245
  $grid-res-toolbar-search-clear-icon-font-size: 17px !default;
246
246
  $grid-res-toolbar-search-icon-font-size: 18px !default;
247
- $grid-res-toolbar-search-wrapper-padding: 5px 18px 5px 0 !default;
247
+ $grid-res-toolbar-search-wrapper-padding: 2.5px 5px !default;
248
+ $grid-res-toolbar-search-wrapper-icon-padding: 9px 11.5px !default;
248
249
  $grid-res-toolbar-search-wrapper-padding-right: 18px !default;
249
250
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
250
251
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2102,18 +2103,17 @@ $grid-checkmark-color: $grey !default;
2102
2103
 
2103
2104
  & .e-toolbar-right:not(.e-responsive-right) {
2104
2105
  & .e-search-wrapper:not(.e-responsive-right) {
2105
- width: 40px;
2106
+ min-width: 40px;
2106
2107
  }
2107
2108
  }
2108
2109
 
2109
2110
  & .e-toolbar-right {
2110
2111
  & .e-search-wrapper {
2111
- width: 100%;
2112
2112
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2113
-
2114
2113
  & .e-search-icon {
2115
2114
  font-size: $grid-res-toolbar-search-icon-font-size;
2116
2115
  margin-top: 0;
2116
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2117
2117
  }
2118
2118
 
2119
2119
  & .e-input-group {
@@ -2138,6 +2138,9 @@ $grid-checkmark-color: $grey !default;
2138
2138
  }
2139
2139
  }
2140
2140
  }
2141
+ & .e-search-wrapper:has(.e-input-group) {
2142
+ width: 100%;
2143
+ }
2141
2144
  }
2142
2145
 
2143
2146
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/bootstrap4.scss CHANGED
@@ -246,7 +246,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
246
246
  $grid-res-toolbar-clear-icon-margin: 0 !default;
247
247
  $grid-res-toolbar-search-clear-icon-font-size: 18px !default;
248
248
  $grid-res-toolbar-search-icon-font-size: 18px !default;
249
- $grid-res-toolbar-search-wrapper-padding: 5px 30px 5px 0 !default;
249
+ $grid-res-toolbar-search-wrapper-padding: 6px 4.5px !default;
250
+ $grid-res-toolbar-search-wrapper-icon-padding: 9px 8.5px !default;
250
251
  $grid-res-toolbar-search-wrapper-padding-right: 30px !default;
251
252
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
252
253
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2109,18 +2110,17 @@ $grid-checkmark-color: $white !default;
2109
2110
 
2110
2111
  & .e-toolbar-right:not(.e-responsive-right) {
2111
2112
  & .e-search-wrapper:not(.e-responsive-right) {
2112
- width: 40px;
2113
+ min-width: 40px;
2113
2114
  }
2114
2115
  }
2115
2116
 
2116
2117
  & .e-toolbar-right {
2117
2118
  & .e-search-wrapper {
2118
- width: 100%;
2119
2119
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2120
-
2121
2120
  & .e-search-icon {
2122
2121
  font-size: $grid-res-toolbar-search-icon-font-size;
2123
2122
  margin-top: 0;
2123
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2124
2124
  }
2125
2125
 
2126
2126
  & .e-input-group {
@@ -2145,6 +2145,9 @@ $grid-checkmark-color: $white !default;
2145
2145
  }
2146
2146
  }
2147
2147
  }
2148
+ & .e-search-wrapper:has(.e-input-group) {
2149
+ width: 100%;
2150
+ }
2148
2151
  }
2149
2152
 
2150
2153
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/bootstrap5-dark.scss CHANGED
@@ -242,7 +242,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
242
242
  $grid-res-toolbar-clear-icon-margin: 0 !default;
243
243
  $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
244
244
  $grid-res-toolbar-search-icon-font-size: 16px !default;
245
- $grid-res-toolbar-search-wrapper-padding: 5px 25px 5px 0 !default;
245
+ $grid-res-toolbar-search-wrapper-padding: 4px 10px 4px 4px !default;
246
+ $grid-res-toolbar-search-wrapper-icon-padding: 10px !default;
246
247
  $grid-res-toolbar-search-wrapper-padding-right: 13px !default;
247
248
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
248
249
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2102,18 +2103,17 @@ $grid-checkmark-color: $primary-text-color !default;
2102
2103
 
2103
2104
  & .e-toolbar-right:not(.e-responsive-right) {
2104
2105
  & .e-search-wrapper:not(.e-responsive-right) {
2105
- width: 40px;
2106
+ min-width: 40px;
2106
2107
  }
2107
2108
  }
2108
2109
 
2109
2110
  & .e-toolbar-right {
2110
2111
  & .e-search-wrapper {
2111
- width: 100%;
2112
2112
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2113
-
2114
2113
  & .e-search-icon {
2115
2114
  font-size: $grid-res-toolbar-search-icon-font-size;
2116
2115
  margin-top: 0;
2116
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2117
2117
  }
2118
2118
 
2119
2119
  & .e-input-group {
@@ -2138,6 +2138,9 @@ $grid-checkmark-color: $primary-text-color !default;
2138
2138
  }
2139
2139
  }
2140
2140
  }
2141
+ & .e-search-wrapper:has(.e-input-group) {
2142
+ width: 100%;
2143
+ }
2141
2144
  }
2142
2145
 
2143
2146
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/bootstrap5.scss CHANGED
@@ -242,7 +242,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
242
242
  $grid-res-toolbar-clear-icon-margin: 0 !default;
243
243
  $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
244
244
  $grid-res-toolbar-search-icon-font-size: 16px !default;
245
- $grid-res-toolbar-search-wrapper-padding: 5px 25px 5px 0 !default;
245
+ $grid-res-toolbar-search-wrapper-padding: 4px 10px 4px 4px !default;
246
+ $grid-res-toolbar-search-wrapper-icon-padding: 10px !default;
246
247
  $grid-res-toolbar-search-wrapper-padding-right: 13px !default;
247
248
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
248
249
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2102,18 +2103,17 @@ $grid-checkmark-color: $primary-text-color !default;
2102
2103
 
2103
2104
  & .e-toolbar-right:not(.e-responsive-right) {
2104
2105
  & .e-search-wrapper:not(.e-responsive-right) {
2105
- width: 40px;
2106
+ min-width: 40px;
2106
2107
  }
2107
2108
  }
2108
2109
 
2109
2110
  & .e-toolbar-right {
2110
2111
  & .e-search-wrapper {
2111
- width: 100%;
2112
2112
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2113
-
2114
2113
  & .e-search-icon {
2115
2114
  font-size: $grid-res-toolbar-search-icon-font-size;
2116
2115
  margin-top: 0;
2116
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2117
2117
  }
2118
2118
 
2119
2119
  & .e-input-group {
@@ -2138,6 +2138,9 @@ $grid-checkmark-color: $primary-text-color !default;
2138
2138
  }
2139
2139
  }
2140
2140
  }
2141
+ & .e-search-wrapper:has(.e-input-group) {
2142
+ width: 100%;
2143
+ }
2141
2144
  }
2142
2145
 
2143
2146
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fabric-dark.scss CHANGED
@@ -205,7 +205,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
205
205
  $grid-res-toolbar-clear-icon-margin: 0 !default;
206
206
  $grid-res-toolbar-search-clear-icon-font-size: 17px !default;
207
207
  $grid-res-toolbar-search-icon-font-size: 18px !default;
208
- $grid-res-toolbar-search-wrapper-padding: 0 1.5px !default;
208
+ $grid-res-toolbar-search-wrapper-padding: 0 6.5px !default;
209
+ $grid-res-toolbar-search-wrapper-icon-padding: 11px !default;
209
210
  $grid-res-toolbar-search-wrapper-padding-right: 1.5px !default;
210
211
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
211
212
  $grid-bigger-toolbar-search-wrapper-padding-bottom: 5px !default;
@@ -2101,18 +2102,17 @@ $grid-checkmark-color: $theme-dark-font !default;
2101
2102
 
2102
2103
  & .e-toolbar-right:not(.e-responsive-right) {
2103
2104
  & .e-search-wrapper:not(.e-responsive-right) {
2104
- width: 40px;
2105
+ min-width: 40px;
2105
2106
  }
2106
2107
  }
2107
2108
 
2108
2109
  & .e-toolbar-right {
2109
2110
  & .e-search-wrapper {
2110
- width: 100%;
2111
2111
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2112
-
2113
2112
  & .e-search-icon {
2114
2113
  font-size: $grid-res-toolbar-search-icon-font-size;
2115
2114
  margin-top: 0;
2115
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2116
2116
  }
2117
2117
 
2118
2118
  & .e-input-group {
@@ -2137,6 +2137,9 @@ $grid-checkmark-color: $theme-dark-font !default;
2137
2137
  }
2138
2138
  }
2139
2139
  }
2140
+ & .e-search-wrapper:has(.e-input-group) {
2141
+ width: 100%;
2142
+ }
2140
2143
  }
2141
2144
 
2142
2145
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fabric.scss CHANGED
@@ -209,7 +209,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
209
209
  $grid-res-toolbar-clear-icon-margin: 0 !default;
210
210
  $grid-res-toolbar-search-clear-icon-font-size: 17px !default;
211
211
  $grid-res-toolbar-search-icon-font-size: 18px !default;
212
- $grid-res-toolbar-search-wrapper-padding: 0 1.5px !default;
212
+ $grid-res-toolbar-search-wrapper-padding: 0 6.5px !default;
213
+ $grid-res-toolbar-search-wrapper-icon-padding: 11px !default;
213
214
  $grid-res-toolbar-search-wrapper-padding-right: 1.5px !default;
214
215
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
215
216
  $grid-bigger-toolbar-search-wrapper-padding-bottom: 5px !default;
@@ -2100,18 +2101,17 @@ $grid-checkmark-color: $theme-primary-font !default;
2100
2101
 
2101
2102
  & .e-toolbar-right:not(.e-responsive-right) {
2102
2103
  & .e-search-wrapper:not(.e-responsive-right) {
2103
- width: 40px;
2104
+ min-width: 40px;
2104
2105
  }
2105
2106
  }
2106
2107
 
2107
2108
  & .e-toolbar-right {
2108
2109
  & .e-search-wrapper {
2109
- width: 100%;
2110
2110
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2111
-
2112
2111
  & .e-search-icon {
2113
2112
  font-size: $grid-res-toolbar-search-icon-font-size;
2114
2113
  margin-top: 0;
2114
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2115
2115
  }
2116
2116
 
2117
2117
  & .e-input-group {
@@ -2136,6 +2136,9 @@ $grid-checkmark-color: $theme-primary-font !default;
2136
2136
  }
2137
2137
  }
2138
2138
  }
2139
+ & .e-search-wrapper:has(.e-input-group) {
2140
+ width: 100%;
2141
+ }
2139
2142
  }
2140
2143
 
2141
2144
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fluent-dark.scss CHANGED
@@ -291,7 +291,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
291
291
  $grid-res-toolbar-clear-icon-margin: 0 !default;
292
292
  $grid-res-toolbar-search-clear-icon-font-size: $font-icon-17 !default;
293
293
  $grid-res-toolbar-search-icon-font-size: 18px !default;
294
- $grid-res-toolbar-search-wrapper-padding: 2px 18px 5px 0 !default;
294
+ $grid-res-toolbar-search-wrapper-padding: 2px !default;
295
+ $grid-res-toolbar-search-wrapper-icon-padding: 13px !default;
295
296
  $grid-res-toolbar-search-wrapper-padding-right: 8px !default;
296
297
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
297
298
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2103,18 +2104,17 @@ $grid-checkmark-color: $primary-text-color !default;
2103
2104
 
2104
2105
  & .e-toolbar-right:not(.e-responsive-right) {
2105
2106
  & .e-search-wrapper:not(.e-responsive-right) {
2106
- width: 40px;
2107
+ min-width: 40px;
2107
2108
  }
2108
2109
  }
2109
2110
 
2110
2111
  & .e-toolbar-right {
2111
2112
  & .e-search-wrapper {
2112
- width: 100%;
2113
2113
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2114
-
2115
2114
  & .e-search-icon {
2116
2115
  font-size: $grid-res-toolbar-search-icon-font-size;
2117
2116
  margin-top: 0;
2117
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2118
2118
  }
2119
2119
 
2120
2120
  & .e-input-group {
@@ -2139,6 +2139,9 @@ $grid-checkmark-color: $primary-text-color !default;
2139
2139
  }
2140
2140
  }
2141
2141
  }
2142
+ & .e-search-wrapper:has(.e-input-group) {
2143
+ width: 100%;
2144
+ }
2142
2145
  }
2143
2146
 
2144
2147
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fluent.scss CHANGED
@@ -291,7 +291,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
291
291
  $grid-res-toolbar-clear-icon-margin: 0 !default;
292
292
  $grid-res-toolbar-search-clear-icon-font-size: $font-icon-17 !default;
293
293
  $grid-res-toolbar-search-icon-font-size: 18px !default;
294
- $grid-res-toolbar-search-wrapper-padding: 2px 18px 5px 0 !default;
294
+ $grid-res-toolbar-search-wrapper-padding: 2px !default;
295
+ $grid-res-toolbar-search-wrapper-icon-padding: 13px !default;
295
296
  $grid-res-toolbar-search-wrapper-padding-right: 8px !default;
296
297
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
297
298
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2103,18 +2104,17 @@ $grid-checkmark-color: $primary-text-color !default;
2103
2104
 
2104
2105
  & .e-toolbar-right:not(.e-responsive-right) {
2105
2106
  & .e-search-wrapper:not(.e-responsive-right) {
2106
- width: 40px;
2107
+ min-width: 40px;
2107
2108
  }
2108
2109
  }
2109
2110
 
2110
2111
  & .e-toolbar-right {
2111
2112
  & .e-search-wrapper {
2112
- width: 100%;
2113
2113
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2114
-
2115
2114
  & .e-search-icon {
2116
2115
  font-size: $grid-res-toolbar-search-icon-font-size;
2117
2116
  margin-top: 0;
2117
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2118
2118
  }
2119
2119
 
2120
2120
  & .e-input-group {
@@ -2139,6 +2139,9 @@ $grid-checkmark-color: $primary-text-color !default;
2139
2139
  }
2140
2140
  }
2141
2141
  }
2142
+ & .e-search-wrapper:has(.e-input-group) {
2143
+ width: 100%;
2144
+ }
2142
2145
  }
2143
2146
 
2144
2147
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fluent2-dark.scss CHANGED
@@ -245,7 +245,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
245
245
  $grid-res-toolbar-clear-icon-margin: 0 !default;
246
246
  $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
247
247
  $grid-res-toolbar-search-icon-font-size: 18px !default;
248
- $grid-res-toolbar-search-wrapper-padding: 5px 25px 5px -1px !default;
248
+ $grid-res-toolbar-search-wrapper-padding: 4px !default;
249
+ $grid-res-toolbar-search-wrapper-icon-padding: 7px !default;
249
250
  $grid-res-toolbar-search-wrapper-padding-right: 16px !default;
250
251
  $grid-res-toolbar-search-icon-padding-left: 10px !default;
251
252
  $grid-toolbar-search-wrapper-padding-bottom: 2px !default;
@@ -2116,18 +2117,17 @@ $grid-checkmark-color: $primary-text-color !default;
2116
2117
 
2117
2118
  & .e-toolbar-right:not(.e-responsive-right) {
2118
2119
  & .e-search-wrapper:not(.e-responsive-right) {
2119
- width: 40px;
2120
+ min-width: 40px;
2120
2121
  }
2121
2122
  }
2122
2123
 
2123
2124
  & .e-toolbar-right {
2124
2125
  & .e-search-wrapper {
2125
- width: 100%;
2126
2126
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2127
-
2128
2127
  & .e-search-icon {
2129
2128
  font-size: $grid-res-toolbar-search-icon-font-size;
2130
2129
  margin-top: 0;
2130
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2131
2131
  }
2132
2132
 
2133
2133
  & .e-input-group {
@@ -2152,6 +2152,9 @@ $grid-checkmark-color: $primary-text-color !default;
2152
2152
  }
2153
2153
  }
2154
2154
  }
2155
+ & .e-search-wrapper:has(.e-input-group) {
2156
+ width: 100%;
2157
+ }
2155
2158
  }
2156
2159
 
2157
2160
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/fluent2.scss CHANGED
@@ -245,7 +245,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
245
245
  $grid-res-toolbar-clear-icon-margin: 0 !default;
246
246
  $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
247
247
  $grid-res-toolbar-search-icon-font-size: 18px !default;
248
- $grid-res-toolbar-search-wrapper-padding: 5px 25px 5px -1px !default;
248
+ $grid-res-toolbar-search-wrapper-padding: 4px !default;
249
+ $grid-res-toolbar-search-wrapper-icon-padding: 7px !default;
249
250
  $grid-res-toolbar-search-wrapper-padding-right: 16px !default;
250
251
  $grid-res-toolbar-search-icon-padding-left: 10px !default;
251
252
  $grid-toolbar-search-wrapper-padding-bottom: 2px !default;
@@ -2116,18 +2117,17 @@ $grid-checkmark-color: $primary-text-color !default;
2116
2117
 
2117
2118
  & .e-toolbar-right:not(.e-responsive-right) {
2118
2119
  & .e-search-wrapper:not(.e-responsive-right) {
2119
- width: 40px;
2120
+ min-width: 40px;
2120
2121
  }
2121
2122
  }
2122
2123
 
2123
2124
  & .e-toolbar-right {
2124
2125
  & .e-search-wrapper {
2125
- width: 100%;
2126
2126
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2127
-
2128
2127
  & .e-search-icon {
2129
2128
  font-size: $grid-res-toolbar-search-icon-font-size;
2130
2129
  margin-top: 0;
2130
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2131
2131
  }
2132
2132
 
2133
2133
  & .e-input-group {
@@ -2152,6 +2152,9 @@ $grid-checkmark-color: $primary-text-color !default;
2152
2152
  }
2153
2153
  }
2154
2154
  }
2155
+ & .e-search-wrapper:has(.e-input-group) {
2156
+ width: 100%;
2157
+ }
2155
2158
  }
2156
2159
 
2157
2160
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/highcontrast.scss CHANGED
@@ -437,7 +437,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
437
437
  $grid-res-toolbar-clear-icon-margin: 0 !default;
438
438
  $grid-res-toolbar-search-clear-icon-font-size: 17px !default;
439
439
  $grid-res-toolbar-search-icon-font-size: 18px !default;
440
- $grid-res-toolbar-search-wrapper-padding: 0 1.5px !default;
440
+ $grid-res-toolbar-search-wrapper-padding: 0 11px 0 2px !default;
441
+ $grid-res-toolbar-search-wrapper-icon-padding: 11px !default;
441
442
  $grid-res-toolbar-search-wrapper-padding-right: 1.5px !default;
442
443
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
443
444
  $grid-bigger-toolbar-search-icon-min-width: 38px !default;
@@ -2100,18 +2101,17 @@ $grid-checkmark-color: $selection-font !default;
2100
2101
 
2101
2102
  & .e-toolbar-right:not(.e-responsive-right) {
2102
2103
  & .e-search-wrapper:not(.e-responsive-right) {
2103
- width: 40px;
2104
+ min-width: 40px;
2104
2105
  }
2105
2106
  }
2106
2107
 
2107
2108
  & .e-toolbar-right {
2108
2109
  & .e-search-wrapper {
2109
- width: 100%;
2110
2110
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2111
-
2112
2111
  & .e-search-icon {
2113
2112
  font-size: $grid-res-toolbar-search-icon-font-size;
2114
2113
  margin-top: 0;
2114
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2115
2115
  }
2116
2116
 
2117
2117
  & .e-input-group {
@@ -2136,6 +2136,9 @@ $grid-checkmark-color: $selection-font !default;
2136
2136
  }
2137
2137
  }
2138
2138
  }
2139
+ & .e-search-wrapper:has(.e-input-group) {
2140
+ width: 100%;
2141
+ }
2139
2142
  }
2140
2143
 
2141
2144
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/material-dark.scss CHANGED
@@ -441,7 +441,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
441
441
  $grid-res-toolbar-clear-icon-margin: 10px 14px 5px 0 !default;
442
442
  $grid-res-toolbar-search-clear-icon-font-size: 18px !default;
443
443
  $grid-res-toolbar-search-icon-font-size: 18px !default;
444
- $grid-res-toolbar-search-wrapper-padding: 5px !default;
444
+ $grid-res-toolbar-search-wrapper-padding: 5px 6px !default;
445
+ $grid-res-toolbar-search-wrapper-icon-padding: 6px 9px !default;
445
446
  $grid-res-toolbar-search-wrapper-padding-right: 5px !default;
446
447
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
447
448
  $grid-bigger-toolbar-search-icon-min-width: 20px !default;
@@ -2100,18 +2101,17 @@ $grid-checkmark-color: $accent-font !default;
2100
2101
 
2101
2102
  & .e-toolbar-right:not(.e-responsive-right) {
2102
2103
  & .e-search-wrapper:not(.e-responsive-right) {
2103
- width: 40px;
2104
+ min-width: 40px;
2104
2105
  }
2105
2106
  }
2106
2107
 
2107
2108
  & .e-toolbar-right {
2108
2109
  & .e-search-wrapper {
2109
- width: 100%;
2110
2110
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2111
-
2112
2111
  & .e-search-icon {
2113
2112
  font-size: $grid-res-toolbar-search-icon-font-size;
2114
2113
  margin-top: 0;
2114
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2115
2115
  }
2116
2116
 
2117
2117
  & .e-input-group {
@@ -2136,6 +2136,9 @@ $grid-checkmark-color: $accent-font !default;
2136
2136
  }
2137
2137
  }
2138
2138
  }
2139
+ & .e-search-wrapper:has(.e-input-group) {
2140
+ width: 100%;
2141
+ }
2139
2142
  }
2140
2143
 
2141
2144
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/material.scss CHANGED
@@ -462,7 +462,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
462
462
  $grid-res-toolbar-clear-icon-margin: 13px 14px 5px 0 !default;
463
463
  $grid-res-toolbar-search-clear-icon-font-size: 17px !default;
464
464
  $grid-res-toolbar-search-icon-font-size: 18px !default;
465
- $grid-res-toolbar-search-wrapper-padding: 5px !default;
465
+ $grid-res-toolbar-search-wrapper-padding: 5px 6px !default;
466
+ $grid-res-toolbar-search-wrapper-icon-padding: 6px 9px !default;
466
467
  $grid-res-toolbar-search-wrapper-padding-right: 5px !default;
467
468
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
468
469
  $grid-bigger-toolbar-search-icon-min-width: 20px !default;
@@ -565,7 +566,7 @@ $grid-responsive-custom-header-btn-color: $grid-filtered-color !default;
565
566
  $grid-responsive-custom-header-right-margin: 6px 4px 6px 4px !default;
566
567
  $grid-responsive-filter-clear-font: 18px !default;
567
568
  $grid-responsive-search-icon-margin: 14px !default;
568
- $grid-responsive-search-padding-right: 0 !default;
569
+ $grid-responsive-search-padding-right: 10px !default;
569
570
  $grid-responsive-search-icon-right: 9px !default;
570
571
  $grid-responsive-search-padding-left: 18px !default;
571
572
  $grid-responsive-header-background: $grey-white !default;
@@ -2100,18 +2101,17 @@ $grid-checkmark-color: $accent-font !default;
2100
2101
 
2101
2102
  & .e-toolbar-right:not(.e-responsive-right) {
2102
2103
  & .e-search-wrapper:not(.e-responsive-right) {
2103
- width: 40px;
2104
+ min-width: 40px;
2104
2105
  }
2105
2106
  }
2106
2107
 
2107
2108
  & .e-toolbar-right {
2108
2109
  & .e-search-wrapper {
2109
- width: 100%;
2110
2110
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2111
-
2112
2111
  & .e-search-icon {
2113
2112
  font-size: $grid-res-toolbar-search-icon-font-size;
2114
2113
  margin-top: 0;
2114
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2115
2115
  }
2116
2116
 
2117
2117
  & .e-input-group {
@@ -2136,6 +2136,9 @@ $grid-checkmark-color: $accent-font !default;
2136
2136
  }
2137
2137
  }
2138
2138
  }
2139
+ & .e-search-wrapper:has(.e-input-group) {
2140
+ width: 100%;
2141
+ }
2139
2142
  }
2140
2143
 
2141
2144
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/material3-dark.scss CHANGED
@@ -242,7 +242,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
242
242
  $grid-res-toolbar-clear-icon-margin: 0 10px 0 0 !default;
243
243
  $grid-res-toolbar-search-clear-icon-font-size: 18px !default;
244
244
  $grid-res-toolbar-search-icon-font-size: 20px !default;
245
- $grid-res-toolbar-search-wrapper-padding: 5px !default;
245
+ $grid-res-toolbar-search-wrapper-padding: 8px 4px !default;
246
+ $grid-res-toolbar-search-wrapper-icon-padding: 10px !default;
246
247
  $grid-res-toolbar-search-wrapper-padding-right: 5px !default;
247
248
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
248
249
  $grid-toolbar-search-wrapper-padding-bottom: 3px !default;
@@ -2103,18 +2104,17 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
2103
2104
 
2104
2105
  & .e-toolbar-right:not(.e-responsive-right) {
2105
2106
  & .e-search-wrapper:not(.e-responsive-right) {
2106
- width: 40px;
2107
+ min-width: 40px;
2107
2108
  }
2108
2109
  }
2109
2110
 
2110
2111
  & .e-toolbar-right {
2111
2112
  & .e-search-wrapper {
2112
- width: 100%;
2113
2113
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2114
-
2115
2114
  & .e-search-icon {
2116
2115
  font-size: $grid-res-toolbar-search-icon-font-size;
2117
2116
  margin-top: 0;
2117
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2118
2118
  }
2119
2119
 
2120
2120
  & .e-input-group {
@@ -2139,6 +2139,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
2139
2139
  }
2140
2140
  }
2141
2141
  }
2142
+ & .e-search-wrapper:has(.e-input-group) {
2143
+ width: 100%;
2144
+ }
2142
2145
  }
2143
2146
 
2144
2147
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/material3.scss CHANGED
@@ -242,7 +242,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
242
242
  $grid-res-toolbar-clear-icon-margin: 0 10px 0 0 !default;
243
243
  $grid-res-toolbar-search-clear-icon-font-size: 18px !default;
244
244
  $grid-res-toolbar-search-icon-font-size: 20px !default;
245
- $grid-res-toolbar-search-wrapper-padding: 5px !default;
245
+ $grid-res-toolbar-search-wrapper-padding: 8px 4px !default;
246
+ $grid-res-toolbar-search-wrapper-icon-padding: 10px !default;
246
247
  $grid-res-toolbar-search-wrapper-padding-right: 5px !default;
247
248
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
248
249
  $grid-toolbar-search-wrapper-padding-bottom: 3px !default;
@@ -2103,18 +2104,17 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
2103
2104
 
2104
2105
  & .e-toolbar-right:not(.e-responsive-right) {
2105
2106
  & .e-search-wrapper:not(.e-responsive-right) {
2106
- width: 40px;
2107
+ min-width: 40px;
2107
2108
  }
2108
2109
  }
2109
2110
 
2110
2111
  & .e-toolbar-right {
2111
2112
  & .e-search-wrapper {
2112
- width: 100%;
2113
2113
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2114
-
2115
2114
  & .e-search-icon {
2116
2115
  font-size: $grid-res-toolbar-search-icon-font-size;
2117
2116
  margin-top: 0;
2117
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2118
2118
  }
2119
2119
 
2120
2120
  & .e-input-group {
@@ -2139,6 +2139,9 @@ $grid-checkmark-color: rgba($primary-text-color) !default;
2139
2139
  }
2140
2140
  }
2141
2141
  }
2142
+ & .e-search-wrapper:has(.e-input-group) {
2143
+ width: 100%;
2144
+ }
2142
2145
  }
2143
2146
 
2144
2147
  & .e-responsive-right {
package/SCSS-Themes/grids/grid/tailwind-dark.scss CHANGED
@@ -245,7 +245,8 @@ $grid-res-toolbar-clear-icon-width: 100% !default;
245
245
  $grid-res-toolbar-clear-icon-margin: 0 !default;
246
246
  $grid-res-toolbar-search-clear-icon-font-size: $text-base !default;
247
247
  $grid-res-toolbar-search-icon-font-size: 16px !default;
248
- $grid-res-toolbar-search-wrapper-padding: 3px 16px 3px 0 !default;
248
+ $grid-res-toolbar-search-wrapper-padding: 4px 6px !default;
249
+ $grid-res-toolbar-search-wrapper-icon-padding: 11px !default;
249
250
  $grid-res-toolbar-search-wrapper-padding-right: 6px !default;
250
251
  $grid-res-toolbar-search-icon-padding-left: 0 !default;
251
252
  $grid-toolbar-search-wrapper-padding-bottom: 3px !default;
@@ -2109,18 +2110,17 @@ $grid-checkmark-color: $primary-text-color !default;
2109
2110
 
2110
2111
  & .e-toolbar-right:not(.e-responsive-right) {
2111
2112
  & .e-search-wrapper:not(.e-responsive-right) {
2112
- width: 40px;
2113
+ min-width: 40px;
2113
2114
  }
2114
2115
  }
2115
2116
 
2116
2117
  & .e-toolbar-right {
2117
2118
  & .e-search-wrapper {
2118
- width: 100%;
2119
2119
  @include grid-padding-left-right($grid-responsive-search-padding-left, $grid-responsive-search-padding-right);
2120
-
2121
2120
  & .e-search-icon {
2122
2121
  font-size: $grid-res-toolbar-search-icon-font-size;
2123
2122
  margin-top: 0;
2123
+ padding: $grid-res-toolbar-search-wrapper-icon-padding;
2124
2124
  }
2125
2125
 
2126
2126
  & .e-input-group {
@@ -2145,6 +2145,9 @@ $grid-checkmark-color: $primary-text-color !default;
2145
2145
  }
2146
2146
  }
2147
2147
  }
2148
+ & .e-search-wrapper:has(.e-input-group) {
2149
+ width: 100%;
2150
+ }
2148
2151
  }
2149
2152
 
2150
2153
  & .e-responsive-right {