@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/fabric.scss CHANGED
@@ -2152,6 +2152,34 @@ $float-label-rtl-value: -7px !default;
2152
2152
  user-select: text;
2153
2153
  }
2154
2154
 
2155
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2156
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2157
+ left: -34px;
2158
+ width: auto;
2159
+ }
2160
+ }
2161
+
2162
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2163
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2164
+ right: -34px;
2165
+ width: auto;
2166
+ }
2167
+ }
2168
+
2169
+ .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 {
2170
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2171
+ left: -40px;
2172
+ width: auto;
2173
+ }
2174
+ }
2175
+
2176
+ .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 {
2177
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2178
+ right: -40px;
2179
+ width: auto;
2180
+ }
2181
+ }
2182
+
2155
2183
  label.e-float-text,
2156
2184
  .e-float-input label.e-float-text,
2157
2185
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5744,6 +5772,16 @@ $float-label-rtl-value: -7px !default;
5744
5772
  }
5745
5773
  }
5746
5774
 
5775
+ .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),
5776
+ .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),
5777
+ .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),
5778
+ .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),
5779
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5780
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5781
+ border-top-color: transparent;
5782
+ }
5783
+ }
5784
+
5747
5785
  .e-outline.e-input-group,
5748
5786
  .e-outline .e-input-group,
5749
5787
  .e-outline .e-input-group.e-control-wrapper,
@@ -5888,20 +5926,12 @@ $float-label-rtl-value: -7px !default;
5888
5926
  .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),
5889
5927
  .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),
5890
5928
  .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),
5891
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5892
- .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),
5893
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5894
- .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),
5895
5929
  .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),
5896
5930
  .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),
5897
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5898
- .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),
5899
5931
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5900
5932
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5901
5933
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5902
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5903
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5904
- .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) {
5934
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5905
5935
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5906
5936
  border-color: $input-active-border-color;
5907
5937
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5919,12 +5949,32 @@ $float-label-rtl-value: -7px !default;
5919
5949
  }
5920
5950
  }
5921
5951
 
5952
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5953
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5954
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5955
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5956
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5957
+ margin-right: $zero-value;
5958
+ }
5959
+ }
5960
+
5922
5961
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5923
5962
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5924
5963
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5925
5964
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5926
5965
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5927
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5966
+ margin-left: 4px;
5967
+ margin-right: $zero-value;
5968
+ }
5969
+ }
5970
+
5971
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5972
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5973
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5974
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5975
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5976
+ margin-right: 4px;
5977
+ margin-left: $zero-value;
5928
5978
  }
5929
5979
  }
5930
5980
 
@@ -6396,6 +6446,24 @@ $float-label-rtl-value: -7px !default;
6396
6446
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6397
6447
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6398
6448
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6449
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6450
+ margin-left: $outline-bigger-input-icon-margin-right;
6451
+ margin-right: $zero-value;
6452
+ }
6453
+ }
6454
+
6455
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6456
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6457
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6458
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6459
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6460
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6461
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6462
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6463
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6464
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6465
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6466
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6399
6467
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6400
6468
  margin-left: $zero-value;
6401
6469
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6952,6 +7020,17 @@ $float-label-rtl-value: -7px !default;
6952
7020
  }
6953
7021
  }
6954
7022
 
7023
+ .e-outline.e-float-icon-left label.e-float-text::before,
7024
+ .e-outline.e-float-icon-left label.e-float-text::after,
7025
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7026
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7027
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7028
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7029
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7030
+ transition: none;
7031
+ }
7032
+ }
7033
+
6955
7034
  .e-bigger.e-outline label.e-float-text::before,
6956
7035
  .e-bigger.e-outline label.e-float-text::after,
6957
7036
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/fluent-dark.scss CHANGED
@@ -2179,6 +2179,34 @@ $float-label-rtl-value: -10px !default;
2179
2179
  user-select: text;
2180
2180
  }
2181
2181
 
2182
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2183
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2184
+ left: -34px;
2185
+ width: auto;
2186
+ }
2187
+ }
2188
+
2189
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2190
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2191
+ right: -34px;
2192
+ width: auto;
2193
+ }
2194
+ }
2195
+
2196
+ .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 {
2197
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2198
+ left: -40px;
2199
+ width: auto;
2200
+ }
2201
+ }
2202
+
2203
+ .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 {
2204
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2205
+ right: -40px;
2206
+ width: auto;
2207
+ }
2208
+ }
2209
+
2182
2210
  label.e-float-text,
2183
2211
  .e-float-input label.e-float-text,
2184
2212
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5771,6 +5799,16 @@ $float-label-rtl-value: -10px !default;
5771
5799
  }
5772
5800
  }
5773
5801
 
5802
+ .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),
5803
+ .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),
5804
+ .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),
5805
+ .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),
5806
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5807
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5808
+ border-top-color: transparent;
5809
+ }
5810
+ }
5811
+
5774
5812
  .e-outline.e-input-group,
5775
5813
  .e-outline .e-input-group,
5776
5814
  .e-outline .e-input-group.e-control-wrapper,
@@ -5915,20 +5953,12 @@ $float-label-rtl-value: -10px !default;
5915
5953
  .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),
5916
5954
  .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),
5917
5955
  .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),
5918
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
- .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),
5920
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5921
- .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),
5922
5956
  .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),
5923
5957
  .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),
5924
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5925
- .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),
5926
5958
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
5959
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
5960
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5929
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5930
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5931
- .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) {
5961
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5932
5962
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5933
5963
  border-color: $input-active-border-color;
5934
5964
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5946,12 +5976,32 @@ $float-label-rtl-value: -10px !default;
5946
5976
  }
5947
5977
  }
5948
5978
 
5979
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5980
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5981
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5982
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5983
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5984
+ margin-right: $zero-value;
5985
+ }
5986
+ }
5987
+
5949
5988
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5950
5989
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5951
5990
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5952
5991
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5953
5992
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5954
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5993
+ margin-left: 4px;
5994
+ margin-right: $zero-value;
5995
+ }
5996
+ }
5997
+
5998
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5999
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
6000
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6001
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6002
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6003
+ margin-right: 4px;
6004
+ margin-left: $zero-value;
5955
6005
  }
5956
6006
  }
5957
6007
 
@@ -6423,6 +6473,24 @@ $float-label-rtl-value: -10px !default;
6423
6473
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6424
6474
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6425
6475
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6476
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6477
+ margin-left: $outline-bigger-input-icon-margin-right;
6478
+ margin-right: $zero-value;
6479
+ }
6480
+ }
6481
+
6482
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6484
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6485
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6487
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6488
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6490
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6491
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6492
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6493
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6426
6494
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6427
6495
  margin-left: $zero-value;
6428
6496
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6979,6 +7047,17 @@ $float-label-rtl-value: -10px !default;
6979
7047
  }
6980
7048
  }
6981
7049
 
7050
+ .e-outline.e-float-icon-left label.e-float-text::before,
7051
+ .e-outline.e-float-icon-left label.e-float-text::after,
7052
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7053
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7054
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7055
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7056
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7057
+ transition: none;
7058
+ }
7059
+ }
7060
+
6982
7061
  .e-bigger.e-outline label.e-float-text::before,
6983
7062
  .e-bigger.e-outline label.e-float-text::after,
6984
7063
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/fluent.scss CHANGED
@@ -2179,6 +2179,34 @@ $float-label-rtl-value: -10px !default;
2179
2179
  user-select: text;
2180
2180
  }
2181
2181
 
2182
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2183
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2184
+ left: -34px;
2185
+ width: auto;
2186
+ }
2187
+ }
2188
+
2189
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2190
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2191
+ right: -34px;
2192
+ width: auto;
2193
+ }
2194
+ }
2195
+
2196
+ .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 {
2197
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2198
+ left: -40px;
2199
+ width: auto;
2200
+ }
2201
+ }
2202
+
2203
+ .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 {
2204
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2205
+ right: -40px;
2206
+ width: auto;
2207
+ }
2208
+ }
2209
+
2182
2210
  label.e-float-text,
2183
2211
  .e-float-input label.e-float-text,
2184
2212
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5771,6 +5799,16 @@ $float-label-rtl-value: -10px !default;
5771
5799
  }
5772
5800
  }
5773
5801
 
5802
+ .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),
5803
+ .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),
5804
+ .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),
5805
+ .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),
5806
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5807
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5808
+ border-top-color: transparent;
5809
+ }
5810
+ }
5811
+
5774
5812
  .e-outline.e-input-group,
5775
5813
  .e-outline .e-input-group,
5776
5814
  .e-outline .e-input-group.e-control-wrapper,
@@ -5915,20 +5953,12 @@ $float-label-rtl-value: -10px !default;
5915
5953
  .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),
5916
5954
  .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),
5917
5955
  .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),
5918
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
- .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),
5920
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5921
- .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),
5922
5956
  .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),
5923
5957
  .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),
5924
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5925
- .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),
5926
5958
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
5959
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
5960
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5929
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5930
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5931
- .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) {
5961
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5932
5962
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5933
5963
  border-color: $input-active-border-color;
5934
5964
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5946,12 +5976,32 @@ $float-label-rtl-value: -10px !default;
5946
5976
  }
5947
5977
  }
5948
5978
 
5979
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5980
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5981
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5982
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5983
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5984
+ margin-right: $zero-value;
5985
+ }
5986
+ }
5987
+
5949
5988
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5950
5989
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5951
5990
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5952
5991
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5953
5992
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5954
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5993
+ margin-left: 4px;
5994
+ margin-right: $zero-value;
5995
+ }
5996
+ }
5997
+
5998
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5999
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
6000
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6001
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6002
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6003
+ margin-right: 4px;
6004
+ margin-left: $zero-value;
5955
6005
  }
5956
6006
  }
5957
6007
 
@@ -6423,6 +6473,24 @@ $float-label-rtl-value: -10px !default;
6423
6473
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6424
6474
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6425
6475
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6476
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6477
+ margin-left: $outline-bigger-input-icon-margin-right;
6478
+ margin-right: $zero-value;
6479
+ }
6480
+ }
6481
+
6482
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6484
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6485
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6487
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6488
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6490
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6491
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6492
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6493
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6426
6494
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6427
6495
  margin-left: $zero-value;
6428
6496
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6979,6 +7047,17 @@ $float-label-rtl-value: -10px !default;
6979
7047
  }
6980
7048
  }
6981
7049
 
7050
+ .e-outline.e-float-icon-left label.e-float-text::before,
7051
+ .e-outline.e-float-icon-left label.e-float-text::after,
7052
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7053
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7054
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7055
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7056
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7057
+ transition: none;
7058
+ }
7059
+ }
7060
+
6982
7061
  .e-bigger.e-outline label.e-float-text::before,
6983
7062
  .e-bigger.e-outline label.e-float-text::after,
6984
7063
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/highcontrast.scss CHANGED
@@ -2153,6 +2153,34 @@ $float-label-rtl-value: -7px !default;
2153
2153
  user-select: text;
2154
2154
  }
2155
2155
 
2156
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2157
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2158
+ left: -34px;
2159
+ width: auto;
2160
+ }
2161
+ }
2162
+
2163
+ .e-float-input.e-outline.e-float-icon-left.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
+ right: -34px;
2166
+ width: auto;
2167
+ }
2168
+ }
2169
+
2170
+ .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 {
2171
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2172
+ left: -40px;
2173
+ width: auto;
2174
+ }
2175
+ }
2176
+
2177
+ .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 {
2178
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2179
+ right: -40px;
2180
+ width: auto;
2181
+ }
2182
+ }
2183
+
2156
2184
  label.e-float-text,
2157
2185
  .e-float-input label.e-float-text,
2158
2186
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5745,6 +5773,16 @@ $float-label-rtl-value: -7px !default;
5745
5773
  }
5746
5774
  }
5747
5775
 
5776
+ .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),
5777
+ .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),
5778
+ .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),
5779
+ .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),
5780
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5781
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5782
+ border-top-color: transparent;
5783
+ }
5784
+ }
5785
+
5748
5786
  .e-outline.e-input-group,
5749
5787
  .e-outline .e-input-group,
5750
5788
  .e-outline .e-input-group.e-control-wrapper,
@@ -5889,20 +5927,12 @@ $float-label-rtl-value: -7px !default;
5889
5927
  .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),
5890
5928
  .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),
5891
5929
  .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),
5892
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5893
- .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),
5894
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5895
- .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),
5896
5930
  .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),
5897
5931
  .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),
5898
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5899
- .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),
5900
5932
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5901
5933
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5902
5934
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5903
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5904
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5905
- .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) {
5935
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5906
5936
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5907
5937
  border-color: $input-active-border-color;
5908
5938
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5920,12 +5950,32 @@ $float-label-rtl-value: -7px !default;
5920
5950
  }
5921
5951
  }
5922
5952
 
5953
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5954
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5955
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5956
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5957
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5958
+ margin-right: $zero-value;
5959
+ }
5960
+ }
5961
+
5923
5962
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5924
5963
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5925
5964
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5926
5965
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5927
5966
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5928
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5967
+ margin-left: 4px;
5968
+ margin-right: $zero-value;
5969
+ }
5970
+ }
5971
+
5972
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5973
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5974
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5975
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5976
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5977
+ margin-right: 4px;
5978
+ margin-left: $zero-value;
5929
5979
  }
5930
5980
  }
5931
5981
 
@@ -6397,6 +6447,24 @@ $float-label-rtl-value: -7px !default;
6397
6447
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6398
6448
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6399
6449
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6450
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6451
+ margin-left: $outline-bigger-input-icon-margin-right;
6452
+ margin-right: $zero-value;
6453
+ }
6454
+ }
6455
+
6456
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6457
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6458
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6459
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6460
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6461
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6462
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6463
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6464
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6465
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6466
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6467
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6400
6468
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6401
6469
  margin-left: $zero-value;
6402
6470
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6953,6 +7021,17 @@ $float-label-rtl-value: -7px !default;
6953
7021
  }
6954
7022
  }
6955
7023
 
7024
+ .e-outline.e-float-icon-left label.e-float-text::before,
7025
+ .e-outline.e-float-icon-left label.e-float-text::after,
7026
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7027
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7028
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7029
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7030
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7031
+ transition: none;
7032
+ }
7033
+ }
7034
+
6956
7035
  .e-bigger.e-outline label.e-float-text::before,
6957
7036
  .e-bigger.e-outline label.e-float-text::after,
6958
7037
  .e-bigger.e-outline.e-float-input label.e-float-text::before,