@syncfusion/blazor-themes 22.2.11 → 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 (50) hide show
  1. package/SCSS-Themes/base/material-dark.scss +1 -1
  2. package/SCSS-Themes/bootstrap-dark.scss +94 -10
  3. package/SCSS-Themes/bootstrap.scss +94 -10
  4. package/SCSS-Themes/bootstrap4.scss +94 -10
  5. package/SCSS-Themes/bootstrap5-dark.scss +94 -10
  6. package/SCSS-Themes/bootstrap5.scss +94 -10
  7. package/SCSS-Themes/fabric-dark.scss +94 -10
  8. package/SCSS-Themes/fabric.scss +94 -10
  9. package/SCSS-Themes/fluent-dark.scss +94 -10
  10. package/SCSS-Themes/fluent.scss +94 -10
  11. package/SCSS-Themes/grids/grid/bootstrap-dark.scss +5 -0
  12. package/SCSS-Themes/grids/grid/bootstrap.scss +5 -0
  13. package/SCSS-Themes/grids/grid/bootstrap4.scss +5 -0
  14. package/SCSS-Themes/grids/grid/bootstrap5-dark.scss +5 -0
  15. package/SCSS-Themes/grids/grid/bootstrap5.scss +5 -0
  16. package/SCSS-Themes/grids/grid/fabric-dark.scss +5 -0
  17. package/SCSS-Themes/grids/grid/fabric.scss +5 -0
  18. package/SCSS-Themes/grids/grid/fluent-dark.scss +5 -0
  19. package/SCSS-Themes/grids/grid/fluent.scss +5 -0
  20. package/SCSS-Themes/grids/grid/highcontrast.scss +5 -0
  21. package/SCSS-Themes/grids/grid/material-dark.scss +5 -0
  22. package/SCSS-Themes/grids/grid/material.scss +5 -0
  23. package/SCSS-Themes/grids/grid/material3-dark.scss +5 -0
  24. package/SCSS-Themes/grids/grid/material3.scss +5 -0
  25. package/SCSS-Themes/grids/grid/tailwind-dark.scss +5 -0
  26. package/SCSS-Themes/grids/grid/tailwind.scss +5 -0
  27. package/SCSS-Themes/highcontrast.scss +94 -10
  28. package/SCSS-Themes/inputs/input/bootstrap-dark.scss +89 -10
  29. package/SCSS-Themes/inputs/input/bootstrap.scss +89 -10
  30. package/SCSS-Themes/inputs/input/bootstrap4.scss +89 -10
  31. package/SCSS-Themes/inputs/input/bootstrap5-dark.scss +89 -10
  32. package/SCSS-Themes/inputs/input/bootstrap5.scss +89 -10
  33. package/SCSS-Themes/inputs/input/fabric-dark.scss +89 -10
  34. package/SCSS-Themes/inputs/input/fabric.scss +89 -10
  35. package/SCSS-Themes/inputs/input/fluent-dark.scss +89 -10
  36. package/SCSS-Themes/inputs/input/fluent.scss +89 -10
  37. package/SCSS-Themes/inputs/input/highcontrast.scss +89 -10
  38. package/SCSS-Themes/inputs/input/material-dark.scss +91 -12
  39. package/SCSS-Themes/inputs/input/material.scss +91 -12
  40. package/SCSS-Themes/inputs/input/material3-dark.scss +91 -12
  41. package/SCSS-Themes/inputs/input/material3.scss +91 -12
  42. package/SCSS-Themes/inputs/input/tailwind-dark.scss +89 -10
  43. package/SCSS-Themes/inputs/input/tailwind.scss +89 -10
  44. package/SCSS-Themes/material-dark.scss +97 -13
  45. package/SCSS-Themes/material.scss +96 -12
  46. package/SCSS-Themes/material3-dark.scss +96 -12
  47. package/SCSS-Themes/material3.scss +96 -12
  48. package/SCSS-Themes/tailwind-dark.scss +94 -10
  49. package/SCSS-Themes/tailwind.scss +94 -10
  50. package/package.json +1 -1
package/SCSS-Themes/inputs/input/material3.scss CHANGED
@@ -193,7 +193,7 @@ $input-icon-font-size: $font-icon-16 !default;
193
193
  $input-bigger-icon-font-size: $font-icon-20 !default;
194
194
  $input-small-icon-font-size: $font-icon-16 !default;
195
195
  $input-bigger-small-icon-font-size: $font-icon-20 !default;
196
- $input-inner-wrap-margin-left: 16px !default;
196
+ $input-inner-wrap-margin-left: 8px !default;
197
197
  $input-clear-icon-padding-bottom: 4px !default;
198
198
  $input-clear-icon-padding-right: 8px !default;
199
199
  $input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
@@ -312,7 +312,7 @@ $outline-valid-input-font-size: 14px !default;
312
312
  $outline-label-default-line-height: 13px !default;
313
313
  $outline-label-before-left-rtl: 5px !default;
314
314
  $outline-label-after-left-rtl: -6px !default;
315
- $outline-label-line-height: 50px !default;
315
+ $outline-label-line-height: 54px !default;
316
316
  $outline-bigger-label-line-height: 70px !default;
317
317
  $outline-small-bigger-label-line-height: 53px !default;
318
318
  $outline-small-label-line-height: 46px !default;
@@ -2389,6 +2389,34 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
2389
2389
  user-select: text;
2390
2390
  }
2391
2391
 
2392
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2393
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2394
+ left: -34px;
2395
+ width: auto;
2396
+ }
2397
+ }
2398
+
2399
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2400
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2401
+ right: -34px;
2402
+ width: auto;
2403
+ }
2404
+ }
2405
+
2406
+ .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 {
2407
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2408
+ left: -40px;
2409
+ width: auto;
2410
+ }
2411
+ }
2412
+
2413
+ .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 {
2414
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2415
+ right: -40px;
2416
+ width: auto;
2417
+ }
2418
+ }
2419
+
2392
2420
  label.e-float-text,
2393
2421
  .e-float-input label.e-float-text,
2394
2422
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5981,6 +6009,16 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
5981
6009
  }
5982
6010
  }
5983
6011
 
6012
+ .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),
6013
+ .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),
6014
+ .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),
6015
+ .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),
6016
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
6017
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6018
+ border-top-color: transparent;
6019
+ }
6020
+ }
6021
+
5984
6022
  .e-outline.e-input-group,
5985
6023
  .e-outline .e-input-group,
5986
6024
  .e-outline .e-input-group.e-control-wrapper,
@@ -6125,20 +6163,12 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
6125
6163
  .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),
6126
6164
  .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),
6127
6165
  .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),
6128
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6129
- .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),
6130
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6131
- .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),
6132
6166
  .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),
6133
6167
  .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),
6134
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
6135
- .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),
6136
6168
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6137
6169
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6138
6170
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6139
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6140
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6141
- .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) {
6171
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
6142
6172
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6143
6173
  border-color: $input-active-border-color;
6144
6174
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -6156,12 +6186,32 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
6156
6186
  }
6157
6187
  }
6158
6188
 
6189
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
6190
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
6191
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
6192
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
6193
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6194
+ margin-right: $zero-value;
6195
+ }
6196
+ }
6197
+
6159
6198
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
6160
6199
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
6161
6200
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6162
6201
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6163
6202
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6164
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
6203
+ margin-left: 4px;
6204
+ margin-right: $zero-value;
6205
+ }
6206
+ }
6207
+
6208
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6209
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
6210
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6211
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6212
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6213
+ margin-right: 4px;
6214
+ margin-left: $zero-value;
6165
6215
  }
6166
6216
  }
6167
6217
 
@@ -6633,6 +6683,24 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
6633
6683
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6634
6684
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6635
6685
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6686
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6687
+ margin-left: $outline-bigger-input-icon-margin-right;
6688
+ margin-right: $zero-value;
6689
+ }
6690
+ }
6691
+
6692
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6693
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6694
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6695
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6696
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6697
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6698
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6699
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6700
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6701
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6702
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6703
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6636
6704
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6637
6705
  margin-left: $zero-value;
6638
6706
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -7189,6 +7257,17 @@ $filled-input-clear-icon-active-color: rgba($icon-color) !default;
7189
7257
  }
7190
7258
  }
7191
7259
 
7260
+ .e-outline.e-float-icon-left label.e-float-text::before,
7261
+ .e-outline.e-float-icon-left label.e-float-text::after,
7262
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7263
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7264
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7265
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7266
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7267
+ transition: none;
7268
+ }
7269
+ }
7270
+
7192
7271
  .e-bigger.e-outline label.e-float-text::before,
7193
7272
  .e-bigger.e-outline label.e-float-text::after,
7194
7273
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/tailwind-dark.scss CHANGED
@@ -2176,6 +2176,34 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
2176
2176
  user-select: text;
2177
2177
  }
2178
2178
 
2179
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2180
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2181
+ left: -34px;
2182
+ width: auto;
2183
+ }
2184
+ }
2185
+
2186
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2187
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2188
+ right: -34px;
2189
+ width: auto;
2190
+ }
2191
+ }
2192
+
2193
+ .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 {
2194
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2195
+ left: -40px;
2196
+ width: auto;
2197
+ }
2198
+ }
2199
+
2200
+ .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 {
2201
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2202
+ right: -40px;
2203
+ width: auto;
2204
+ }
2205
+ }
2206
+
2179
2207
  label.e-float-text,
2180
2208
  .e-float-input label.e-float-text,
2181
2209
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5768,6 +5796,16 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5768
5796
  }
5769
5797
  }
5770
5798
 
5799
+ .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),
5800
+ .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),
5801
+ .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),
5802
+ .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),
5803
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5804
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5805
+ border-top-color: transparent;
5806
+ }
5807
+ }
5808
+
5771
5809
  .e-outline.e-input-group,
5772
5810
  .e-outline .e-input-group,
5773
5811
  .e-outline .e-input-group.e-control-wrapper,
@@ -5912,20 +5950,12 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5912
5950
  .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),
5913
5951
  .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),
5914
5952
  .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),
5915
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5916
- .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),
5917
- .e-outline.e-float-input.e-input-focus.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-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
5953
  .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),
5920
5954
  .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),
5921
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5922
- .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),
5923
5955
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5924
5956
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5925
5957
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5926
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
- .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) {
5958
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5929
5959
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5930
5960
  border-color: $input-active-border-color;
5931
5961
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5943,12 +5973,32 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5943
5973
  }
5944
5974
  }
5945
5975
 
5976
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5977
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5978
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5979
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5980
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5981
+ margin-right: $zero-value;
5982
+ }
5983
+ }
5984
+
5946
5985
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5947
5986
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5948
5987
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5949
5988
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5950
5989
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5951
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5990
+ margin-left: 4px;
5991
+ margin-right: $zero-value;
5992
+ }
5993
+ }
5994
+
5995
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5996
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5997
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5998
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5999
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6000
+ margin-right: 4px;
6001
+ margin-left: $zero-value;
5952
6002
  }
5953
6003
  }
5954
6004
 
@@ -6420,6 +6470,24 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
6420
6470
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6421
6471
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6422
6472
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6473
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6474
+ margin-left: $outline-bigger-input-icon-margin-right;
6475
+ margin-right: $zero-value;
6476
+ }
6477
+ }
6478
+
6479
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6480
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6481
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6482
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6484
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6485
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6487
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6488
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6490
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6423
6491
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6424
6492
  margin-left: $zero-value;
6425
6493
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6976,6 +7044,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
6976
7044
  }
6977
7045
  }
6978
7046
 
7047
+ .e-outline.e-float-icon-left label.e-float-text::before,
7048
+ .e-outline.e-float-icon-left label.e-float-text::after,
7049
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7050
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7051
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7052
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7053
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7054
+ transition: none;
7055
+ }
7056
+ }
7057
+
6979
7058
  .e-bigger.e-outline label.e-float-text::before,
6980
7059
  .e-bigger.e-outline label.e-float-text::after,
6981
7060
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/tailwind.scss CHANGED
@@ -2176,6 +2176,34 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
2176
2176
  user-select: text;
2177
2177
  }
2178
2178
 
2179
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2180
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2181
+ left: -34px;
2182
+ width: auto;
2183
+ }
2184
+ }
2185
+
2186
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2187
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2188
+ right: -34px;
2189
+ width: auto;
2190
+ }
2191
+ }
2192
+
2193
+ .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 {
2194
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2195
+ left: -40px;
2196
+ width: auto;
2197
+ }
2198
+ }
2199
+
2200
+ .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 {
2201
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2202
+ right: -40px;
2203
+ width: auto;
2204
+ }
2205
+ }
2206
+
2179
2207
  label.e-float-text,
2180
2208
  .e-float-input label.e-float-text,
2181
2209
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -5768,6 +5796,16 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5768
5796
  }
5769
5797
  }
5770
5798
 
5799
+ .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),
5800
+ .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),
5801
+ .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),
5802
+ .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),
5803
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
5804
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5805
+ border-top-color: transparent;
5806
+ }
5807
+ }
5808
+
5771
5809
  .e-outline.e-input-group,
5772
5810
  .e-outline .e-input-group,
5773
5811
  .e-outline .e-input-group.e-control-wrapper,
@@ -5912,20 +5950,12 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5912
5950
  .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),
5913
5951
  .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),
5914
5952
  .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),
5915
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5916
- .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),
5917
- .e-outline.e-float-input.e-input-focus.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-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5919
5953
  .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),
5920
5954
  .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),
5921
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
5922
- .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),
5923
5955
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5924
5956
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5925
5957
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5926
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5927
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
5928
- .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) {
5958
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
5929
5959
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5930
5960
  border-color: $input-active-border-color;
5931
5961
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -5943,12 +5973,32 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
5943
5973
  }
5944
5974
  }
5945
5975
 
5976
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
5977
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
5978
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
5979
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
5980
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5981
+ margin-right: $zero-value;
5982
+ }
5983
+ }
5984
+
5946
5985
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
5947
5986
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
5948
5987
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5949
5988
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5950
5989
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5951
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
5990
+ margin-left: 4px;
5991
+ margin-right: $zero-value;
5992
+ }
5993
+ }
5994
+
5995
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
5996
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
5997
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
5998
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
5999
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6000
+ margin-right: 4px;
6001
+ margin-left: $zero-value;
5952
6002
  }
5953
6003
  }
5954
6004
 
@@ -6420,6 +6470,24 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
6420
6470
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6421
6471
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6422
6472
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6473
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6474
+ margin-left: $outline-bigger-input-icon-margin-right;
6475
+ margin-right: $zero-value;
6476
+ }
6477
+ }
6478
+
6479
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6480
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6481
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6482
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6483
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6484
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6485
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6486
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6487
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6488
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6489
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6490
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6423
6491
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6424
6492
  margin-left: $zero-value;
6425
6493
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -6976,6 +7044,17 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
6976
7044
  }
6977
7045
  }
6978
7046
 
7047
+ .e-outline.e-float-icon-left label.e-float-text::before,
7048
+ .e-outline.e-float-icon-left label.e-float-text::after,
7049
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7050
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7051
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7052
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7053
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7054
+ transition: none;
7055
+ }
7056
+ }
7057
+
6979
7058
  .e-bigger.e-outline label.e-float-text::before,
6980
7059
  .e-bigger.e-outline label.e-float-text::after,
6981
7060
  .e-bigger.e-outline.e-float-input label.e-float-text::before,