@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/bootstrap5-dark.scss CHANGED
@@ -5375,6 +5375,34 @@ $float-label-rtl-value: -7px !default;
5375
5375
  user-select: text;
5376
5376
  }
5377
5377
 
5378
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5379
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5380
+ left: -34px;
5381
+ width: auto;
5382
+ }
5383
+ }
5384
+
5385
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5386
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5387
+ right: -34px;
5388
+ width: auto;
5389
+ }
5390
+ }
5391
+
5392
+ .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 {
5393
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5394
+ left: -40px;
5395
+ width: auto;
5396
+ }
5397
+ }
5398
+
5399
+ .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 {
5400
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5401
+ right: -40px;
5402
+ width: auto;
5403
+ }
5404
+ }
5405
+
5378
5406
  label.e-float-text,
5379
5407
  .e-float-input label.e-float-text,
5380
5408
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -8967,6 +8995,16 @@ $float-label-rtl-value: -7px !default;
8967
8995
  }
8968
8996
  }
8969
8997
 
8998
+ .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),
8999
+ .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),
9000
+ .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),
9001
+ .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),
9002
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
9003
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9004
+ border-top-color: transparent;
9005
+ }
9006
+ }
9007
+
8970
9008
  .e-outline.e-input-group,
8971
9009
  .e-outline .e-input-group,
8972
9010
  .e-outline .e-input-group.e-control-wrapper,
@@ -9111,20 +9149,12 @@ $float-label-rtl-value: -7px !default;
9111
9149
  .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),
9112
9150
  .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),
9113
9151
  .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),
9114
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9115
- .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),
9116
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9117
- .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),
9118
9152
  .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),
9119
9153
  .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),
9120
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
9121
- .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),
9122
9154
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9123
9155
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9124
9156
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9125
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9126
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9127
- .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) {
9157
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
9128
9158
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9129
9159
  border-color: $input-active-border-color;
9130
9160
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -9142,12 +9172,32 @@ $float-label-rtl-value: -7px !default;
9142
9172
  }
9143
9173
  }
9144
9174
 
9175
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
9176
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
9177
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
9178
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
9179
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9180
+ margin-right: $zero-value;
9181
+ }
9182
+ }
9183
+
9145
9184
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
9146
9185
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
9147
9186
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9148
9187
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9149
9188
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9150
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
9189
+ margin-left: 4px;
9190
+ margin-right: $zero-value;
9191
+ }
9192
+ }
9193
+
9194
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9195
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
9196
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9197
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9198
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9199
+ margin-right: 4px;
9200
+ margin-left: $zero-value;
9151
9201
  }
9152
9202
  }
9153
9203
 
@@ -9619,6 +9669,24 @@ $float-label-rtl-value: -7px !default;
9619
9669
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9620
9670
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9621
9671
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9672
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9673
+ margin-left: $outline-bigger-input-icon-margin-right;
9674
+ margin-right: $zero-value;
9675
+ }
9676
+ }
9677
+
9678
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9679
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9680
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9681
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9682
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9683
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9684
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9685
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9686
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9687
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9688
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9689
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9622
9690
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9623
9691
  margin-left: $zero-value;
9624
9692
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -10175,6 +10243,17 @@ $float-label-rtl-value: -7px !default;
10175
10243
  }
10176
10244
  }
10177
10245
 
10246
+ .e-outline.e-float-icon-left label.e-float-text::before,
10247
+ .e-outline.e-float-icon-left label.e-float-text::after,
10248
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
10249
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
10250
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
10251
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
10252
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
10253
+ transition: none;
10254
+ }
10255
+ }
10256
+
10178
10257
  .e-bigger.e-outline label.e-float-text::before,
10179
10258
  .e-bigger.e-outline label.e-float-text::after,
10180
10259
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -74851,6 +74930,7 @@ $grid-bigger-group-text-line-height: 24px !default;
74851
74930
  $grid-bigger-groupcaption-line-height: 20px !default;
74852
74931
  $grid-bigger-rtl-group-headercell-margin: 8px 8px 0 0 !default;
74853
74932
  $grid-bigger-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
74933
+ $grid-bigger-device-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
74854
74934
  $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
74855
74935
  $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
74856
74936
  $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -76114,6 +76194,10 @@ $grid-dropitems-count-margin-left: -4px !default;
76114
76194
  padding: $grid-bigger-rtl-group-headercell-padding;
76115
76195
  }
76116
76196
 
76197
+ &.e-rtl.e-device .e-groupheadercell {
76198
+ padding: $grid-bigger-device-rtl-group-headercell-padding;
76199
+ }
76200
+
76117
76201
  &.e-rtl span.e-ungroupbutton.e-icons {
76118
76202
  margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
76119
76203
  margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
package/SCSS-Themes/bootstrap5.scss CHANGED
@@ -5375,6 +5375,34 @@ $float-label-rtl-value: -7px !default;
5375
5375
  user-select: text;
5376
5376
  }
5377
5377
 
5378
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5379
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5380
+ left: -34px;
5381
+ width: auto;
5382
+ }
5383
+ }
5384
+
5385
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5386
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5387
+ right: -34px;
5388
+ width: auto;
5389
+ }
5390
+ }
5391
+
5392
+ .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 {
5393
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5394
+ left: -40px;
5395
+ width: auto;
5396
+ }
5397
+ }
5398
+
5399
+ .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 {
5400
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5401
+ right: -40px;
5402
+ width: auto;
5403
+ }
5404
+ }
5405
+
5378
5406
  label.e-float-text,
5379
5407
  .e-float-input label.e-float-text,
5380
5408
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -8967,6 +8995,16 @@ $float-label-rtl-value: -7px !default;
8967
8995
  }
8968
8996
  }
8969
8997
 
8998
+ .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),
8999
+ .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),
9000
+ .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),
9001
+ .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),
9002
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
9003
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9004
+ border-top-color: transparent;
9005
+ }
9006
+ }
9007
+
8970
9008
  .e-outline.e-input-group,
8971
9009
  .e-outline .e-input-group,
8972
9010
  .e-outline .e-input-group.e-control-wrapper,
@@ -9111,20 +9149,12 @@ $float-label-rtl-value: -7px !default;
9111
9149
  .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),
9112
9150
  .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),
9113
9151
  .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),
9114
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9115
- .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),
9116
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9117
- .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),
9118
9152
  .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),
9119
9153
  .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),
9120
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
9121
- .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),
9122
9154
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9123
9155
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9124
9156
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9125
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9126
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
9127
- .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) {
9157
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
9128
9158
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9129
9159
  border-color: $input-active-border-color;
9130
9160
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -9142,12 +9172,32 @@ $float-label-rtl-value: -7px !default;
9142
9172
  }
9143
9173
  }
9144
9174
 
9175
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
9176
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
9177
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
9178
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
9179
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9180
+ margin-right: $zero-value;
9181
+ }
9182
+ }
9183
+
9145
9184
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
9146
9185
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
9147
9186
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9148
9187
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9149
9188
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9150
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
9189
+ margin-left: 4px;
9190
+ margin-right: $zero-value;
9191
+ }
9192
+ }
9193
+
9194
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9195
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
9196
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9197
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9198
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9199
+ margin-right: 4px;
9200
+ margin-left: $zero-value;
9151
9201
  }
9152
9202
  }
9153
9203
 
@@ -9619,6 +9669,24 @@ $float-label-rtl-value: -7px !default;
9619
9669
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9620
9670
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9621
9671
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9672
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9673
+ margin-left: $outline-bigger-input-icon-margin-right;
9674
+ margin-right: $zero-value;
9675
+ }
9676
+ }
9677
+
9678
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9679
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9680
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9681
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9682
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9683
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9684
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9685
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9686
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9687
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9688
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9689
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9622
9690
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9623
9691
  margin-left: $zero-value;
9624
9692
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -10175,6 +10243,17 @@ $float-label-rtl-value: -7px !default;
10175
10243
  }
10176
10244
  }
10177
10245
 
10246
+ .e-outline.e-float-icon-left label.e-float-text::before,
10247
+ .e-outline.e-float-icon-left label.e-float-text::after,
10248
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
10249
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
10250
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
10251
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
10252
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
10253
+ transition: none;
10254
+ }
10255
+ }
10256
+
10178
10257
  .e-bigger.e-outline label.e-float-text::before,
10179
10258
  .e-bigger.e-outline label.e-float-text::after,
10180
10259
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -74851,6 +74930,7 @@ $grid-bigger-group-text-line-height: 24px !default;
74851
74930
  $grid-bigger-groupcaption-line-height: 20px !default;
74852
74931
  $grid-bigger-rtl-group-headercell-margin: 8px 8px 0 0 !default;
74853
74932
  $grid-bigger-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
74933
+ $grid-bigger-device-rtl-group-headercell-padding: 7px 6px 7px 9px !default;
74854
74934
  $grid-bigger-rtl-ungroup-icon-margin-right: -10px !default;
74855
74935
  $grid-bigger-textwrap-srotnumber-rightalign-margin: 3px 2px 0 5px !default;
74856
74936
  $grid-bigger-textwrap-sorticon-rightalign-margin: -9px 5px !default;
@@ -76114,6 +76194,10 @@ $grid-dropitems-count-margin-left: -4px !default;
76114
76194
  padding: $grid-bigger-rtl-group-headercell-padding;
76115
76195
  }
76116
76196
 
76197
+ &.e-rtl.e-device .e-groupheadercell {
76198
+ padding: $grid-bigger-device-rtl-group-headercell-padding;
76199
+ }
76200
+
76117
76201
  &.e-rtl span.e-ungroupbutton.e-icons {
76118
76202
  margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
76119
76203
  margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;
package/SCSS-Themes/fabric-dark.scss CHANGED
@@ -5239,6 +5239,34 @@ $float-label-rtl-value: -7px !default;
5239
5239
  user-select: text;
5240
5240
  }
5241
5241
 
5242
+ .e-float-input.e-outline.e-float-icon-left:not(.e-rtl) .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5243
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5244
+ left: -34px;
5245
+ width: auto;
5246
+ }
5247
+ }
5248
+
5249
+ .e-float-input.e-outline.e-float-icon-left.e-rtl .e-input-in-wrap input ~ label.e-float-text.e-label-top {
5250
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5251
+ right: -34px;
5252
+ width: auto;
5253
+ }
5254
+ }
5255
+
5256
+ .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 {
5257
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5258
+ left: -40px;
5259
+ width: auto;
5260
+ }
5261
+ }
5262
+
5263
+ .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 {
5264
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
5265
+ right: -40px;
5266
+ width: auto;
5267
+ }
5268
+ }
5269
+
5242
5270
  label.e-float-text,
5243
5271
  .e-float-input label.e-float-text,
5244
5272
  .e-float-input.e-control-wrapper label.e-float-text,
@@ -8831,6 +8859,16 @@ $float-label-rtl-value: -7px !default;
8831
8859
  }
8832
8860
  }
8833
8861
 
8862
+ .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),
8863
+ .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),
8864
+ .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),
8865
+ .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),
8866
+ .e-outline.e-float-input.e-control-wrapper.e-valid-input.e-float-icon-left:not(.e-warning):not(.e-success):not(.e-error) {
8867
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
8868
+ border-top-color: transparent;
8869
+ }
8870
+ }
8871
+
8834
8872
  .e-outline.e-input-group,
8835
8873
  .e-outline .e-input-group,
8836
8874
  .e-outline .e-input-group.e-control-wrapper,
@@ -8975,20 +9013,12 @@ $float-label-rtl-value: -7px !default;
8975
9013
  .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),
8976
9014
  .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),
8977
9015
  .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),
8978
- .e-outline.e-input-group.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8979
- .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),
8980
- .e-outline.e-float-input.e-input-focus.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8981
- .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),
8982
9016
  .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),
8983
9017
  .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),
8984
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error),
8985
- .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),
8986
9018
  .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8987
9019
  .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8988
9020
  .e-outline.e-float-input.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8989
- .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8990
- .e-outline.e-input-group.e-float-icon-left.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
8991
- .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) {
9021
+ .e-outline.e-float-input.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
8992
9022
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
8993
9023
  border-color: $input-active-border-color;
8994
9024
  box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
@@ -9006,12 +9036,32 @@ $float-label-rtl-value: -7px !default;
9006
9036
  }
9007
9037
  }
9008
9038
 
9039
+ .e-outline.e-float-input.e-rtl.e-float-icon-left .e-input-in-wrap,
9040
+ .e-outline.e-float-input.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap,
9041
+ .e-outline.e-input-group.e-rtl.e-float-icon-left .e-input-in-wrap,
9042
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left .e-input-in-wrap {
9043
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9044
+ margin-right: $zero-value;
9045
+ }
9046
+ }
9047
+
9009
9048
  .e-outline.e-input-group.e-float-icon-left > .e-input-group-icon,
9010
9049
  .e-outline.e-float-input.e-input-group.e-float-icon-left > .e-input-group-icon,
9011
9050
  .e-outline.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9012
9051
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9013
9052
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9014
- margin: 9px $outline-input-icon-margin-right 9px $zero-value;
9053
+ margin-left: 4px;
9054
+ margin-right: $zero-value;
9055
+ }
9056
+ }
9057
+
9058
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9059
+ .e-outline.e-float-input.e-rtl.e-input-group.e-float-icon-left > .e-input-group-icon,
9060
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9061
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9062
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9063
+ margin-right: 4px;
9064
+ margin-left: $zero-value;
9015
9065
  }
9016
9066
  }
9017
9067
 
@@ -9483,6 +9533,24 @@ $float-label-rtl-value: -7px !default;
9483
9533
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9484
9534
  .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9485
9535
  .e-bigger .e-outline.e-float-input.e-input-group.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9536
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9537
+ margin-left: $outline-bigger-input-icon-margin-right;
9538
+ margin-right: $zero-value;
9539
+ }
9540
+ }
9541
+
9542
+ .e-outline.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9543
+ .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9544
+ .e-bigger .e-outline.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9545
+ .e-outline.e-float-input.e-input-group.e-rtl.e-bigger.e-float-icon-left > .e-input-group-icon,
9546
+ .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon.e-bigger,
9547
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-float-icon-left > .e-input-group-icon,
9548
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9549
+ .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9550
+ .e-bigger .e-outline.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon,
9551
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-bigger.e-float-icon-left > .e-input-group-icon,
9552
+ .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon.e-bigger,
9553
+ .e-bigger .e-outline.e-float-input.e-input-group.e-rtl.e-control-wrapper.e-float-icon-left > .e-input-group-icon {
9486
9554
  @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
9487
9555
  margin-left: $zero-value;
9488
9556
  margin-right: $outline-bigger-input-icon-margin-right;
@@ -10039,6 +10107,17 @@ $float-label-rtl-value: -7px !default;
10039
10107
  }
10040
10108
  }
10041
10109
 
10110
+ .e-outline.e-float-icon-left label.e-float-text::before,
10111
+ .e-outline.e-float-icon-left label.e-float-text::after,
10112
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::before,
10113
+ .e-outline.e-float-input.e-float-icon-left label.e-float-text::after,
10114
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::before,
10115
+ .e-outline.e-float-input.e-control-wrapper.e-float-icon-left label.e-float-text::after {
10116
+ @if $input-skin-name == 'material' or $input-skin-name == 'Material3' {
10117
+ transition: none;
10118
+ }
10119
+ }
10120
+
10042
10121
  .e-bigger.e-outline label.e-float-text::before,
10043
10122
  .e-bigger.e-outline label.e-float-text::after,
10044
10123
  .e-bigger.e-outline.e-float-input label.e-float-text::before,
@@ -74628,6 +74707,7 @@ $grid-device-ungroupbutton-icon-margin-top: 1px !default;
74628
74707
  $grid-bigger-grouparea-font-size: 21px !default;
74629
74708
  $grid-bigger-rtl-group-headercell-margin: 8px 10px 0 0 !default;
74630
74709
  $grid-bigger-rtl-group-headercell-padding: 0 10px !default;
74710
+ $grid-bigger-device-rtl-group-headercell-padding: 0 10px !default;
74631
74711
  $grid-bigger-rtl-ungroup-icon-margin-right: 8px !default;
74632
74712
  $group-bigger-sorticon-margin-right: round($group-sorticon-margin-right*1.25) !default;
74633
74713
  $grid-bigger-gdownarrow-icon-font-size: 14px !default;
@@ -75673,6 +75753,10 @@ $grid-dropitems-count-margin-left: -8px !default;
75673
75753
  padding: $grid-bigger-rtl-group-headercell-padding;
75674
75754
  }
75675
75755
 
75756
+ &.e-rtl.e-device .e-groupheadercell {
75757
+ padding: $grid-bigger-device-rtl-group-headercell-padding;
75758
+ }
75759
+
75676
75760
  &.e-rtl span.e-ungroupbutton.e-icons {
75677
75761
  margin-left: $grid-bigger-rtl-ungroup-icon-margin-left;
75678
75762
  margin-right: $grid-bigger-rtl-ungroup-icon-margin-right;