@syncfusion/blazor-themes 22.2.10 → 22.2.12

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 (66) hide show
  1. package/SCSS-Themes/base/material-dark.scss +1 -1
  2. package/SCSS-Themes/bootstrap-dark.scss +103 -11
  3. package/SCSS-Themes/bootstrap.scss +103 -11
  4. package/SCSS-Themes/bootstrap4.scss +103 -11
  5. package/SCSS-Themes/bootstrap5-dark.scss +103 -11
  6. package/SCSS-Themes/bootstrap5.scss +103 -11
  7. package/SCSS-Themes/fabric-dark.scss +103 -11
  8. package/SCSS-Themes/fabric.scss +103 -11
  9. package/SCSS-Themes/fluent-dark.scss +103 -11
  10. package/SCSS-Themes/fluent.scss +103 -11
  11. package/SCSS-Themes/grids/excel-filter/bootstrap-dark.scss +4 -0
  12. package/SCSS-Themes/grids/excel-filter/bootstrap.scss +4 -0
  13. package/SCSS-Themes/grids/excel-filter/bootstrap4.scss +4 -0
  14. package/SCSS-Themes/grids/excel-filter/bootstrap5-dark.scss +4 -0
  15. package/SCSS-Themes/grids/excel-filter/bootstrap5.scss +4 -0
  16. package/SCSS-Themes/grids/excel-filter/fabric-dark.scss +4 -0
  17. package/SCSS-Themes/grids/excel-filter/fabric.scss +4 -0
  18. package/SCSS-Themes/grids/excel-filter/fluent-dark.scss +4 -0
  19. package/SCSS-Themes/grids/excel-filter/fluent.scss +4 -0
  20. package/SCSS-Themes/grids/excel-filter/highcontrast.scss +4 -0
  21. package/SCSS-Themes/grids/excel-filter/material-dark.scss +4 -0
  22. package/SCSS-Themes/grids/excel-filter/material.scss +4 -0
  23. package/SCSS-Themes/grids/excel-filter/material3-dark.scss +4 -0
  24. package/SCSS-Themes/grids/excel-filter/material3.scss +4 -0
  25. package/SCSS-Themes/grids/excel-filter/tailwind-dark.scss +4 -0
  26. package/SCSS-Themes/grids/excel-filter/tailwind.scss +4 -0
  27. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +10 -1
  28. package/SCSS-Themes/grids/grid/bootstrap.scss +10 -1
  29. package/SCSS-Themes/grids/grid/bootstrap4.scss +10 -1
  30. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +10 -1
  31. package/SCSS-Themes/grids/grid/bootstrap5.scss +10 -1
  32. package/SCSS-Themes/grids/grid/fabric-dark.scss +10 -1
  33. package/SCSS-Themes/grids/grid/fabric.scss +10 -1
  34. package/SCSS-Themes/grids/grid/fluent-dark.scss +10 -1
  35. package/SCSS-Themes/grids/grid/fluent.scss +10 -1
  36. package/SCSS-Themes/grids/grid/highcontrast.scss +10 -1
  37. package/SCSS-Themes/grids/grid/material-dark.scss +10 -1
  38. package/SCSS-Themes/grids/grid/material.scss +10 -1
  39. package/SCSS-Themes/grids/grid/material3-dark.scss +10 -1
  40. package/SCSS-Themes/grids/grid/material3.scss +10 -1
  41. package/SCSS-Themes/grids/grid/tailwind-dark.scss +10 -1
  42. package/SCSS-Themes/grids/grid/tailwind.scss +10 -1
  43. package/SCSS-Themes/highcontrast.scss +103 -11
  44. package/SCSS-Themes/inputs/input/bootstrap-dark.scss +89 -10
  45. package/SCSS-Themes/inputs/input/bootstrap.scss +89 -10
  46. package/SCSS-Themes/inputs/input/bootstrap4.scss +89 -10
  47. package/SCSS-Themes/inputs/input/bootstrap5-dark.scss +89 -10
  48. package/SCSS-Themes/inputs/input/bootstrap5.scss +89 -10
  49. package/SCSS-Themes/inputs/input/fabric-dark.scss +89 -10
  50. package/SCSS-Themes/inputs/input/fabric.scss +89 -10
  51. package/SCSS-Themes/inputs/input/fluent-dark.scss +89 -10
  52. package/SCSS-Themes/inputs/input/fluent.scss +89 -10
  53. package/SCSS-Themes/inputs/input/highcontrast.scss +89 -10
  54. package/SCSS-Themes/inputs/input/material-dark.scss +91 -12
  55. package/SCSS-Themes/inputs/input/material.scss +91 -12
  56. package/SCSS-Themes/inputs/input/material3-dark.scss +91 -12
  57. package/SCSS-Themes/inputs/input/material3.scss +91 -12
  58. package/SCSS-Themes/inputs/input/tailwind-dark.scss +89 -10
  59. package/SCSS-Themes/inputs/input/tailwind.scss +89 -10
  60. package/SCSS-Themes/material-dark.scss +106 -14
  61. package/SCSS-Themes/material.scss +105 -13
  62. package/SCSS-Themes/material3-dark.scss +105 -13
  63. package/SCSS-Themes/material3.scss +105 -13
  64. package/SCSS-Themes/tailwind-dark.scss +103 -11
  65. package/SCSS-Themes/tailwind.scss +103 -11
  66. package/package.json +1 -1
package/SCSS-Themes/inputs/input/bootstrap4.scss CHANGED
@@ -2166,6 +2166,34 @@ $float-label-rtl-value: -7px !default;
2166
2166
  user-select: text;
2167
2167
  }
2168
2168
 
2169
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2170
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2171
+ left: -34px;
2172
+ width: auto;
2173
+ }
2174
+ }
2175
+
2176
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2177
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2178
+ right: -34px;
2179
+ width: auto;
2180
+ }
2181
+ }
2182
+
2183
+ .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2184
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2185
+ left: -40px;
2186
+ width: auto;
2187
+ }
2188
+ }
2189
+
2190
+ .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2191
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2192
+ right: -40px;
2193
+ width: auto;
2194
+ }
2195
+ }
2196
+
2169
2197
  label.e-float-text,
2170
2198
  .e-float-input label.e-float-text,
2171
2199
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5758,6 +5786,16 @@ $float-label-rtl-value: -7px !default;
5758
5786
  }
5759
5787
  }
5760
5788
 
5789
+ .e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5790
+ .e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5791
+ .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5792
+ .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5793
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5794
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5795
+ border-top-color: transparent;
5796
+ }
5797
+ }
5798
+
5761
5799
  .e-outline.e-input-group,
5762
5800
  .e-outline .e-input-group,
5763
5801
  .e-outline .e-input-group.e-control-wrapper,
@@ -5902,20 +5940,12 @@ $float-label-rtl-value: -7px !default;
5902
5940
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5903
5941
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5904
5942
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5905
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5906
- .e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5907
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5908
- .e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5909
5943
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5910
5944
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5911
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5912
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5913
5945
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5914
5946
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5915
5947
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5916
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5917
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5918
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5948
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5919
5949
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5920
5950
  border-color: $input-active-border-color;
5921
5951
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5933,12 +5963,32 @@ $float-label-rtl-value: -7px !default;
5933
5963
  }
5934
5964
  }
5935
5965
 
5966
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5967
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5968
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5969
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5970
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5971
+ margin-right: $zero-value;
5972
+ }
5973
+ }
5974
+
5936
5975
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5937
5976
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5938
5977
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5939
5978
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5940
5979
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5941
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5980
+ margin-left: 4px;
5981
+ margin-right: $zero-value;
5982
+ }
5983
+ }
5984
+
5985
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5986
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5987
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5988
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5989
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5990
+ margin-right: 4px;
5991
+ margin-left: $zero-value;
5942
5992
  }
5943
5993
  }
5944
5994
 
@@ -6410,6 +6460,24 @@ $float-label-rtl-value: -7px !default;
6410
6460
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6411
6461
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6412
6462
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6463
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6464
+ margin-left: $outline-bigger-input-icon-margin-right;
6465
+ margin-right: $zero-value;
6466
+ }
6467
+ }
6468
+
6469
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6470
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6471
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6472
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6473
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6474
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6475
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6476
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6477
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6478
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6479
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6480
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6413
6481
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6414
6482
  margin-left: $zero-value;
6415
6483
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6966,6 +7034,17 @@ $float-label-rtl-value: -7px !default;
6966
7034
  }
6967
7035
  }
6968
7036
 
7037
+ .e-outline.e-float-icon-left label.e-float-text::before,
7038
+ .e-outline.e-float-icon-left label.e-float-text::after,
7039
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7040
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7041
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7042
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7043
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7044
+ transition: none;
7045
+ }
7046
+ }
7047
+
6969
7048
  .e-bigger.e-outline label.e-float-text::before,
6970
7049
  .e-bigger.e-outline label.e-float-text::after,
6971
7050
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/bootstrap5-dark.scss CHANGED
@@ -2177,6 +2177,34 @@ $float-label-rtl-value: -7px !default;
2177
2177
  user-select: text;
2178
2178
  }
2179
2179
 
2180
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2181
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2182
+ left: -34px;
2183
+ width: auto;
2184
+ }
2185
+ }
2186
+
2187
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2188
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2189
+ right: -34px;
2190
+ width: auto;
2191
+ }
2192
+ }
2193
+
2194
+ .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2195
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2196
+ left: -40px;
2197
+ width: auto;
2198
+ }
2199
+ }
2200
+
2201
+ .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2202
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2203
+ right: -40px;
2204
+ width: auto;
2205
+ }
2206
+ }
2207
+
2180
2208
  label.e-float-text,
2181
2209
  .e-float-input label.e-float-text,
2182
2210
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5769,6 +5797,16 @@ $float-label-rtl-value: -7px !default;
5769
5797
  }
5770
5798
  }
5771
5799
 
5800
+ .e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5801
+ .e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5802
+ .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5803
+ .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5804
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5805
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5806
+ border-top-color: transparent;
5807
+ }
5808
+ }
5809
+
5772
5810
  .e-outline.e-input-group,
5773
5811
  .e-outline .e-input-group,
5774
5812
  .e-outline .e-input-group.e-control-wrapper,
@@ -5913,20 +5951,12 @@ $float-label-rtl-value: -7px !default;
5913
5951
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5914
5952
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5915
5953
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5916
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5917
- .e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5918
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
- .e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5920
5954
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5921
5955
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5922
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5923
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5924
5956
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5925
5957
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5926
5958
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5929
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5959
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5930
5960
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5931
5961
  border-color: $input-active-border-color;
5932
5962
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5944,12 +5974,32 @@ $float-label-rtl-value: -7px !default;
5944
5974
  }
5945
5975
  }
5946
5976
 
5977
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5978
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5979
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5980
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5981
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5982
+ margin-right: $zero-value;
5983
+ }
5984
+ }
5985
+
5947
5986
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5948
5987
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5949
5988
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5950
5989
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5951
5990
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5952
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5991
+ margin-left: 4px;
5992
+ margin-right: $zero-value;
5993
+ }
5994
+ }
5995
+
5996
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5997
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5998
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5999
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6000
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6001
+ margin-right: 4px;
6002
+ margin-left: $zero-value;
5953
6003
  }
5954
6004
  }
5955
6005
 
@@ -6421,6 +6471,24 @@ $float-label-rtl-value: -7px !default;
6421
6471
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6422
6472
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6423
6473
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6474
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6475
+ margin-left: $outline-bigger-input-icon-margin-right;
6476
+ margin-right: $zero-value;
6477
+ }
6478
+ }
6479
+
6480
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6481
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6482
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6484
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6485
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6487
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6488
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6490
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6491
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6424
6492
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6425
6493
  margin-left: $zero-value;
6426
6494
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6977,6 +7045,17 @@ $float-label-rtl-value: -7px !default;
6977
7045
  }
6978
7046
  }
6979
7047
 
7048
+ .e-outline.e-float-icon-left label.e-float-text::before,
7049
+ .e-outline.e-float-icon-left label.e-float-text::after,
7050
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7051
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7052
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7053
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7054
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7055
+ transition: none;
7056
+ }
7057
+ }
7058
+
6980
7059
  .e-bigger.e-outline label.e-float-text::before,
6981
7060
  .e-bigger.e-outline label.e-float-text::after,
6982
7061
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/bootstrap5.scss CHANGED
@@ -2177,6 +2177,34 @@ $float-label-rtl-value: -7px !default;
2177
2177
  user-select: text;
2178
2178
  }
2179
2179
 
2180
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2181
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2182
+ left: -34px;
2183
+ width: auto;
2184
+ }
2185
+ }
2186
+
2187
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2188
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2189
+ right: -34px;
2190
+ width: auto;
2191
+ }
2192
+ }
2193
+
2194
+ .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2195
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2196
+ left: -40px;
2197
+ width: auto;
2198
+ }
2199
+ }
2200
+
2201
+ .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2202
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2203
+ right: -40px;
2204
+ width: auto;
2205
+ }
2206
+ }
2207
+
2180
2208
  label.e-float-text,
2181
2209
  .e-float-input label.e-float-text,
2182
2210
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5769,6 +5797,16 @@ $float-label-rtl-value: -7px !default;
5769
5797
  }
5770
5798
  }
5771
5799
 
5800
+ .e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5801
+ .e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5802
+ .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5803
+ .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5804
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5805
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5806
+ border-top-color: transparent;
5807
+ }
5808
+ }
5809
+
5772
5810
  .e-outline.e-input-group,
5773
5811
  .e-outline .e-input-group,
5774
5812
  .e-outline .e-input-group.e-control-wrapper,
@@ -5913,20 +5951,12 @@ $float-label-rtl-value: -7px !default;
5913
5951
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5914
5952
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5915
5953
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5916
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5917
- .e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5918
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
- .e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5920
5954
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5921
5955
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5922
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5923
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5924
5956
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5925
5957
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5926
5958
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5929
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5959
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5930
5960
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5931
5961
  border-color: $input-active-border-color;
5932
5962
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5944,12 +5974,32 @@ $float-label-rtl-value: -7px !default;
5944
5974
  }
5945
5975
  }
5946
5976
 
5977
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5978
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5979
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5980
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5981
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5982
+ margin-right: $zero-value;
5983
+ }
5984
+ }
5985
+
5947
5986
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5948
5987
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5949
5988
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5950
5989
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5951
5990
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5952
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5991
+ margin-left: 4px;
5992
+ margin-right: $zero-value;
5993
+ }
5994
+ }
5995
+
5996
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5997
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5998
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5999
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6000
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6001
+ margin-right: 4px;
6002
+ margin-left: $zero-value;
5953
6003
  }
5954
6004
  }
5955
6005
 
@@ -6421,6 +6471,24 @@ $float-label-rtl-value: -7px !default;
6421
6471
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6422
6472
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6423
6473
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6474
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6475
+ margin-left: $outline-bigger-input-icon-margin-right;
6476
+ margin-right: $zero-value;
6477
+ }
6478
+ }
6479
+
6480
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6481
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6482
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6484
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6485
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6487
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6488
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6490
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6491
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6424
6492
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6425
6493
  margin-left: $zero-value;
6426
6494
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6977,6 +7045,17 @@ $float-label-rtl-value: -7px !default;
6977
7045
  }
6978
7046
  }
6979
7047
 
7048
+ .e-outline.e-float-icon-left label.e-float-text::before,
7049
+ .e-outline.e-float-icon-left label.e-float-text::after,
7050
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7051
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7052
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7053
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7054
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7055
+ transition: none;
7056
+ }
7057
+ }
7058
+
6980
7059
  .e-bigger.e-outline label.e-float-text::before,
6981
7060
  .e-bigger.e-outline label.e-float-text::after,
6982
7061
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/fabric-dark.scss CHANGED
@@ -2160,6 +2160,34 @@ $float-label-rtl-value: -7px !default;
2160
2160
  user-select: text;
2161
2161
  }
2162
2162
 
2163
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2164
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2165
+ left: -34px;
2166
+ width: auto;
2167
+ }
2168
+ }
2169
+
2170
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2171
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2172
+ right: -34px;
2173
+ width: auto;
2174
+ }
2175
+ }
2176
+
2177
+ .e-bigger .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2178
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2179
+ left: -40px;
2180
+ width: auto;
2181
+ }
2182
+ }
2183
+
2184
+ .e-bigger .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2185
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2186
+ right: -40px;
2187
+ width: auto;
2188
+ }
2189
+ }
2190
+
2163
2191
  label.e-float-text,
2164
2192
  .e-float-input label.e-float-text,
2165
2193
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5752,6 +5780,16 @@ $float-label-rtl-value: -7px !default;
5752
5780
  }
5753
5781
  }
5754
5782
 
5783
+ .e-outline.e-input-group.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5784
+ .e-outline.e-input-group.e-valid-input.e-control-wrapper.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5785
+ .e-outline.e-float-input.e-valid-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5786
+ .e-outline.e-float-input.e-valid-input.e-control-wrapper.e-float-icon-left:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5787
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5788
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5789
+ border-top-color: transparent;
5790
+ }
5791
+ }
5792
+
5755
5793
  .e-outline.e-input-group,
5756
5794
  .e-outline .e-input-group,
5757
5795
  .e-outline .e-input-group.e-control-wrapper,
@@ -5896,20 +5934,12 @@ $float-label-rtl-value: -7px !default;
5896
5934
  .e-outline.e-input-group.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5897
5935
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5898
5936
  .e-outline.e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled):not(.e-float-icon-left),
5899
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5900
- .e-outline.e-input-group.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5901
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5902
- .e-outline.e-float-input.e-input-focus.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5903
5937
  .e-outline.e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5904
5938
  .e-outline.e-float-input.e-input-focus.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5905
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5906
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5907
5939
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5908
5940
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5909
5941
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5910
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5911
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5912
- .e-outline.e-input-group.e-control-wrapper.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5942
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5913
5943
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5914
5944
  border-color: $input-active-border-color;
5915
5945
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5927,12 +5957,32 @@ $float-label-rtl-value: -7px !default;
5927
5957
  }
5928
5958
  }
5929
5959
 
5960
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5961
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5962
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5963
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5964
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5965
+ margin-right: $zero-value;
5966
+ }
5967
+ }
5968
+
5930
5969
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5931
5970
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5932
5971
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5933
5972
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5934
5973
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5935
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5974
+ margin-left: 4px;
5975
+ margin-right: $zero-value;
5976
+ }
5977
+ }
5978
+
5979
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5980
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5981
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5982
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5983
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5984
+ margin-right: 4px;
5985
+ margin-left: $zero-value;
5936
5986
  }
5937
5987
  }
5938
5988
 
@@ -6404,6 +6454,24 @@ $float-label-rtl-value: -7px !default;
6404
6454
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6405
6455
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6406
6456
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6457
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6458
+ margin-left: $outline-bigger-input-icon-margin-right;
6459
+ margin-right: $zero-value;
6460
+ }
6461
+ }
6462
+
6463
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6464
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6465
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6466
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6467
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6468
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6469
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6470
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6471
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6472
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6473
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6474
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6407
6475
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6408
6476
  margin-left: $zero-value;
6409
6477
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6960,6 +7028,17 @@ $float-label-rtl-value: -7px !default;
6960
7028
  }
6961
7029
  }
6962
7030
 
7031
+ .e-outline.e-float-icon-left label.e-float-text::before,
7032
+ .e-outline.e-float-icon-left label.e-float-text::after,
7033
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7034
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7035
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7036
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7037
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7038
+ transition: none;
7039
+ }
7040
+ }
7041
+
6963
7042
  .e-bigger.e-outline label.e-float-text::before,
6964
7043
  .e-bigger.e-outline label.e-float-text::after,
6965
7044
  .e-bigger.e-outline.e-float-input label.e-float-text::before,