@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/material-dark.scss CHANGED
@@ -184,7 +184,7 @@ $input-icon-font-size: 12px !default;
184
184
  $input-bigger-icon-font-size: 12px !default;
185
185
  $input-small-icon-font-size: 12px !default;
186
186
  $input-bigger-small-icon-font-size: 12px !default;
187
- $input-inner-wrap-margin-left: 16px !default;
187
+ $input-inner-wrap-margin-left: 8px !default;
188
188
  $input-clear-icon-padding-bottom: 4px !default;
189
189
  $input-clear-icon-padding-right: 4px !default;
190
190
  $input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
@@ -299,7 +299,7 @@ $outline-valid-input-font-size: 14px !default;
299
299
  $outline-label-default-line-height: 13px !default;
300
300
  $outline-label-before-left-rtl: 5px !default;
301
301
  $outline-label-after-left-rtl: -6px !default;
302
- $outline-label-line-height: 50px !default;
302
+ $outline-label-line-height: 54px !default;
303
303
  $outline-bigger-label-line-height: 70px !default;
304
304
  $outline-small-bigger-label-line-height: 53px !default;
305
305
  $outline-small-label-line-height: 46px !default;
@@ -2414,6 +2414,34 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
2414
2414
  user-select: text;
2415
2415
  }
2416
2416
 
2417
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2418
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2419
+ left: -34px;
2420
+ width: auto;
2421
+ }
2422
+ }
2423
+
2424
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2425
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2426
+ right: -34px;
2427
+ width: auto;
2428
+ }
2429
+ }
2430
+
2431
+ .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 {
2432
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2433
+ left: -40px;
2434
+ width: auto;
2435
+ }
2436
+ }
2437
+
2438
+ .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 {
2439
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2440
+ right: -40px;
2441
+ width: auto;
2442
+ }
2443
+ }
2444
+
2417
2445
  label.e-float-text,
2418
2446
  .e-float-input label.e-float-text,
2419
2447
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -6006,6 +6034,16 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6006
6034
  }
6007
6035
  }
6008
6036
 
6037
+ .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),
6038
+ .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),
6039
+ .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),
6040
+ .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),
6041
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
6042
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6043
+ border-top-color: transparent;
6044
+ }
6045
+ }
6046
+
6009
6047
  .e-outline.e-input-group,
6010
6048
  .e-outline .e-input-group,
6011
6049
  .e-outline .e-input-group.e-control-wrapper,
@@ -6150,20 +6188,12 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6150
6188
  .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),
6151
6189
  .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),
6152
6190
  .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),
6153
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6154
- .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),
6155
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6156
- .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),
6157
6191
  .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),
6158
6192
  .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),
6159
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
6160
- .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),
6161
6193
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6162
6194
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6163
6195
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6164
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6165
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6166
- .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) {
6196
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
6167
6197
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6168
6198
  border-color: $input-active-border-color;
6169
6199
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -6181,12 +6211,32 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6181
6211
  }
6182
6212
  }
6183
6213
 
6214
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
6215
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
6216
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
6217
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
6218
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6219
+ margin-right: $zero-value;
6220
+ }
6221
+ }
6222
+
6184
6223
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
6185
6224
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
6186
6225
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6187
6226
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6188
6227
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6189
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
6228
+ margin-left: 4px;
6229
+ margin-right: $zero-value;
6230
+ }
6231
+ }
6232
+
6233
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6234
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
6235
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6236
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6237
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6238
+ margin-right: 4px;
6239
+ margin-left: $zero-value;
6190
6240
  }
6191
6241
  }
6192
6242
 
@@ -6658,6 +6708,24 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6658
6708
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6659
6709
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6660
6710
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6711
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6712
+ margin-left: $outline-bigger-input-icon-margin-right;
6713
+ margin-right: $zero-value;
6714
+ }
6715
+ }
6716
+
6717
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6718
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6719
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6720
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6721
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6722
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6723
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6724
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6725
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6726
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6727
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6728
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6661
6729
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6662
6730
  margin-left: $zero-value;
6663
6731
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -7214,6 +7282,17 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
7214
7282
  }
7215
7283
  }
7216
7284
 
7285
+ .e-outline.e-float-icon-left label.e-float-text::before,
7286
+ .e-outline.e-float-icon-left label.e-float-text::after,
7287
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7288
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7289
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7290
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7291
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7292
+ transition: none;
7293
+ }
7294
+ }
7295
+
7217
7296
  .e-bigger.e-outline label.e-float-text::before,
7218
7297
  .e-bigger.e-outline label.e-float-text::after,
7219
7298
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/material.scss CHANGED
@@ -183,7 +183,7 @@ $input-icon-font-size: 12px !default;
183
183
  $input-bigger-icon-font-size: 12px !default;
184
184
  $input-small-icon-font-size: 12px !default;
185
185
  $input-bigger-small-icon-font-size: 12px !default;
186
- $input-inner-wrap-margin-left: 16px !default;
186
+ $input-inner-wrap-margin-left: 8px !default;
187
187
  $input-clear-icon-padding-bottom: 4px !default;
188
188
  $input-clear-icon-padding-right: 4px !default;
189
189
  $input-clear-icon-padding-left: $input-clear-icon-padding-right !default;
@@ -295,7 +295,7 @@ $outline-valid-input-font-size: 14px !default;
295
295
  $outline-label-default-line-height: 13px !default;
296
296
  $outline-label-before-left-rtl: 5px !default;
297
297
  $outline-label-after-left-rtl: -6px !default;
298
- $outline-label-line-height: 50px !default;
298
+ $outline-label-line-height: 54px !default;
299
299
  $outline-bigger-label-line-height: 70px !default;
300
300
  $outline-small-bigger-label-line-height: 53px !default;
301
301
  $outline-small-label-line-height: 46px !default;
@@ -2414,6 +2414,34 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
2414
2414
  user-select: text;
2415
2415
  }
2416
2416
 
2417
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2418
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2419
+ left: -34px;
2420
+ width: auto;
2421
+ }
2422
+ }
2423
+
2424
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
2425
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2426
+ right: -34px;
2427
+ width: auto;
2428
+ }
2429
+ }
2430
+
2431
+ .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 {
2432
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2433
+ left: -40px;
2434
+ width: auto;
2435
+ }
2436
+ }
2437
+
2438
+ .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 {
2439
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
2440
+ right: -40px;
2441
+ width: auto;
2442
+ }
2443
+ }
2444
+
2417
2445
  label.e-float-text,
2418
2446
  .e-float-input label.e-float-text,
2419
2447
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -6006,6 +6034,16 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6006
6034
  }
6007
6035
  }
6008
6036
 
6037
+ .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),
6038
+ .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),
6039
+ .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),
6040
+ .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),
6041
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
6042
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6043
+ border-top-color: transparent;
6044
+ }
6045
+ }
6046
+
6009
6047
  .e-outline.e-input-group,
6010
6048
  .e-outline .e-input-group,
6011
6049
  .e-outline .e-input-group.e-control-wrapper,
@@ -6150,20 +6188,12 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6150
6188
  .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),
6151
6189
  .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),
6152
6190
  .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),
6153
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6154
- .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),
6155
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6156
- .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),
6157
6191
  .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),
6158
6192
  .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),
6159
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
6160
- .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),
6161
6193
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6162
6194
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6163
6195
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6164
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6165
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
6166
- .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) {
6196
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
6167
6197
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6168
6198
  border-color: $input-active-border-color;
6169
6199
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -6181,12 +6211,32 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6181
6211
  }
6182
6212
  }
6183
6213
 
6214
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
6215
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
6216
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
6217
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
6218
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6219
+ margin-right: $zero-value;
6220
+ }
6221
+ }
6222
+
6184
6223
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
6185
6224
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
6186
6225
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6187
6226
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6188
6227
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6189
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
6228
+ margin-left: 4px;
6229
+ margin-right: $zero-value;
6230
+ }
6231
+ }
6232
+
6233
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6234
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
6235
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6236
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6237
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6238
+ margin-right: 4px;
6239
+ margin-left: $zero-value;
6190
6240
  }
6191
6241
  }
6192
6242
 
@@ -6658,6 +6708,24 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
6658
6708
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6659
6709
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6660
6710
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6711
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6712
+ margin-left: $outline-bigger-input-icon-margin-right;
6713
+ margin-right: $zero-value;
6714
+ }
6715
+ }
6716
+
6717
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6718
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6719
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6720
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
6721
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
6722
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
6723
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6724
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6725
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
6726
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
6727
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
6728
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
6661
6729
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
6662
6730
  margin-left: $zero-value;
6663
6731
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -7214,6 +7282,17 @@ $filled-input-clear-icon-active-color: rgba($grey-light-font, .87) !default;
7214
7282
  }
7215
7283
  }
7216
7284
 
7285
+ .e-outline.e-float-icon-left label.e-float-text::before,
7286
+ .e-outline.e-float-icon-left label.e-float-text::after,
7287
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
7288
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
7289
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
7290
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
7291
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
7292
+ transition: none;
7293
+ }
7294
+ }
7295
+
7217
7296
  .e-bigger.e-outline label.e-float-text::before,
7218
7297
  .e-bigger.e-outline label.e-float-text::after,
7219
7298
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
package/SCSS-Themes/inputs/input/material3-dark.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,