@syncfusion/ej2-inputs 19.4.48 → 20.1.48

package/styles/fluent.scss

@@ -0,0 +1,8 @@
+@import 'signature/fluent.scss';
+@import 'input/fluent.scss';
+@import 'numerictextbox/fluent.scss';
+@import 'maskedtextbox/fluent.scss';
+@import 'slider/fluent.scss';
+@import 'textbox/fluent.scss';
+@import 'uploader/fluent.scss';
+@import 'color-picker/fluent.scss';

package/styles/highcontrast-light.css

@@ -162,11 +162,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper,
-.e-input-group.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-disabled,
-.e-input-group.e-control-wrapper.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-control-wrapper.e-disabled {
+.e-bigger .e-input-group.e-control-wrapper {
   font-size: 15px;
 }
 
@@ -614,8 +610,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
-.e-small .e-bigger.e-input-group .e-input-group-icon,
-.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
+.e-small.e-bigger .e-input-group .e-input-group-icon,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -2852,6 +2848,10 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
+.e-small.e-bigger .e-float-input .e-clear-icon::before,
+.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
+.e-small.e-bigger .e-input-group .e-clear-icon::before,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -6546,6 +6546,7 @@ textarea.e-input::-webkit-input-placeholder {
 
 .e-upload .e-file-drop {
   color: #000;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6635,10 +6636,6 @@ textarea.e-input::-webkit-input-placeholder {
   box-shadow: 0 0 0 transparent;
 }
 
-.e-upload-drag-hover {
-  outline: 2px dashed #400074;
-}
-
 .e-container .e-value-switch-btn::before {
   content: '\e429';
 }

package/styles/highcontrast.css

@@ -162,11 +162,7 @@ textarea.e-input.e-bigger,
 .e-input-group.e-bigger,
 .e-bigger .e-input-group,
 .e-input-group.e-control-wrapper.e-bigger,
-.e-bigger .e-input-group.e-control-wrapper,
-.e-input-group.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-disabled,
-.e-input-group.e-control-wrapper.e-bigger.e-disabled,
-.e-bigger .e-input-group.e-control-wrapper.e-disabled {
+.e-bigger .e-input-group.e-control-wrapper {
   font-size: 15px;
 }
 
@@ -614,8 +610,8 @@ textarea.e-input.e-small,
 .e-input-group.e-small .e-input-group-icon.e-bigger,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-small .e-input-group-icon.e-bigger,
-.e-small .e-bigger.e-input-group .e-input-group-icon,
-.e-small .e-bigger.e-input-group.e-control-wrapper .e-input-group-icon,
+.e-small.e-bigger .e-input-group .e-input-group-icon,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-input-group-icon,
 .e-bigger .e-input-group.e-small .e-input-group-icon,
 .e-bigger .e-input-group.e-control-wrapper.e-small .e-input-group-icon {
   font-size: 12px;
@@ -2852,6 +2848,10 @@ textarea.e-input.e-bigger.e-small,
 .e-float-input.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-small.e-bigger .e-clear-icon::before,
 .e-input-group.e-control-wrapper.e-small.e-bigger .e-clear-icon::before,
+.e-small.e-bigger .e-float-input .e-clear-icon::before,
+.e-small.e-bigger .e-float-input.e-control-wrapper .e-clear-icon::before,
+.e-small.e-bigger .e-input-group .e-clear-icon::before,
+.e-small.e-bigger .e-input-group.e-control-wrapper .e-clear-icon::before,
 .e-small .e-input-group.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-small .e-input-group.e-control-wrapper.e-bigger input:first-child ~ .e-clear-icon::before,
 .e-bigger .e-input-group.e-small input:first-child ~ .e-clear-icon::before,
@@ -6546,6 +6546,7 @@ textarea.e-input::-webkit-input-placeholder {
 
 .e-upload .e-file-drop {
   color: #fff;
+  vertical-align: middle;
 }
 
 .e-upload .e-upload-files {
@@ -6635,10 +6636,6 @@ textarea.e-input::-webkit-input-placeholder {
   box-shadow: 0 0 0 transparent;
 }
 
-.e-upload-drag-hover {
-  outline: 2px dashed #ffd939;
-}
-
 .e-container .e-value-switch-btn::before {
   content: '\e429';
 }

package/styles/input/_bootstrap-dark-definition.scss

@@ -234,6 +234,7 @@ $input-box-border-width: 1px !default;
 $float-input-border-width: 1px !default;
 $input-focus-border-width: 1px !default;
 $input-readonly-bg-color: none !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_bootstrap-definition.scss

@@ -227,6 +227,7 @@ $input-border-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-b
 $input-error-border-shadow:  inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-error-color, .6) !default;
 $input-success-border-shadow:   inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-success-color, .6) !default;
 $input-warning-border-shadow:   inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba($input-warning-color, .6) !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_bootstrap4-definition.scss

@@ -232,6 +232,7 @@ $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in
 $input-error-border-shadow: none !default;
 $input-success-border-shadow: none !default;
 $input-warning-border-shadow: none !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_bootstrap5-definition.scss

@@ -24,10 +24,10 @@ $input-text-indent: 8px !default;
 $input-bigger-text-indent: 12px !default;
 $input-small-text-indent: 8px !default;
 $input-small-bigger-text-indent: 12px !default;
-$input-font-size: 14px !default;
-$input-bigger-font-size: 16px !default;
-$input-small-font-size: 12px !default;
-$input-bigger-small-font-size: 14px !default;
+$input-font-size: $text-sm !default;
+$input-bigger-font-size: $text-base !default;
+$input-small-font-size: $text-xs !default;
+$input-bigger-small-font-size: $text-sm !default;
 $input-box-border-radius: 4px !default;
 $input-small-border-radius: 2px !default;
 $input-bigger-border-radius: 4px !default;
@@ -38,14 +38,14 @@ $input-group-icon-border-radius: 3px !default;
 $input-group-child-border-width: $zero-value !default;
 $input-padding: $zero-value !default;
 $float-input-padding: $zero-value !default;
-$float-label-padding: 10px !default;
+$float-label-padding: $text-xxs !default;
 $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: $zero-value !default;
 $input-focus-padding-bottom: $zero-value !default;
-$input-clear-icon: 10px !default;
-$input-bigger-clear-icon: 12px !default;
-$input-small-clear-icon: 8px !default;
-$input-bigger-small-clear-icon: 12px !default;
+$input-clear-icon: 14px !default;
+$input-bigger-clear-icon: 16px !default;
+$input-small-clear-icon: 12px !default;
+$input-bigger-small-clear-icon: 14px !default;
 $input-clear-icon-padding: $zero-value !default;
 $input-clear-icon-position: center !default;
 $input-bigger-padding: $zero-value !default;
@@ -54,7 +54,7 @@ $float-input-bigger-wrap-padding-top: $zero-value !default;
 $input-bigger-padding-bottom: $zero-value !default;
 $input-focus-bigger-padding-bottom: $zero-value !default;
 $input-child-padding: $zero-value !default;
-$input-child-min-height: 29px !default;
+$input-child-min-height: 30px !default;
 $input-child-min-width: 30px !default;
 $input-bigger-child-padding: $zero-value !default;
 $input-bigger-child-min-height: 36px !default;
@@ -81,7 +81,7 @@ $input-bigger-small-child-padding: $zero-value !default;
 $input-bigger-small-child-min-height: 32px !default;
 $input-bigger-small-child-min-width: 32px !default;
 $input-small-child-padding: $zero-value !default;
-$input-small-child-min-height: 22px !default;
+$input-small-child-min-height: 24px !default;
 $input-small-child-min-width: 24px !default;
 $input-font-family: $font-family !default;
 $input-font-style: normal !default;
@@ -122,14 +122,14 @@ $input-group-border-width-hover: 1px !default;
 $input-group-full-border-width: $one-value !default;
 $input-valid-border-bottom-width: 2px !default;
 $input-right-border-width: $zero-value !default;
-$float-label-font-size: 12px !default;
-$float-label-bigger-font-size: 14px !default;
-$float-label-small-font-size: 10px !default;
-$float-label-bigger-small-font-size: 12px !default;
-$float-placeholder-font-size: 14px !default;
-$float-placeholder-bigger-font-size: 16px !default;
-$float-placeholder-small-font-size: 12px !default;
-$float-placeholder-bigger-small-font-size: 14px !default;
+$float-label-font-size: $text-xs !default;
+$float-label-bigger-font-size: $text-sm !default;
+$float-label-small-font-size: $text-xxs !default;
+$float-label-bigger-small-font-size: $text-xs !default;
+$float-placeholder-font-size: $text-sm !default;
+$float-placeholder-bigger-font-size: $text-base !default;
+$float-placeholder-small-font-size: $text-xs !default;
+$float-placeholder-bigger-small-font-size: $text-sm !default;
 $input-border-size: 2px !default;
 $input-normal-height: 30px !default;
 $input-bigger-height: 36px !default;
@@ -146,10 +146,10 @@ $textarea-bigger-height: auto !default;
 $textarea-small-height: auto !default;
 $textarea-bigger-small-height: auto !default;
 $textarea-full-height: 100% !default;
-$input-icon-font-size: 14px !default;
+$input-icon-font-size: $text-sm !default;
 $input-bigger-icon-font-size: 16px !default;
-$input-small-icon-font-size: 12px !default;
-$input-bigger-small-icon-font-size: 12px !default;
+$input-small-icon-font-size: $text-xs !default;
+$input-bigger-small-icon-font-size: $text-xs !default;
 $input-inner-wrap-margin-left: $zero-value !default;
 $input-clear-icon-padding-bottom: $zero-value !default;
 $input-clear-icon-padding-right: $zero-value !default;
@@ -243,6 +243,7 @@ $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $input-border-shadow: 0 0 0 3px rgba($primary-light, .25) !default;
 $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 $border-type: solid !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_fabric-dark-definition.scss

@@ -224,7 +224,9 @@ $input-clear-icon-font: '\e953' !default;
 $input-hover-bg-color: $neutral-light !default;
 $input-group-pressed-bg: $neutral-quintenary !default;
 $input-group-pressed-color: $neutral-light-fontalt !default;
-$input-readonly-bg-color: none !default;;
+$input-readonly-bg-color: none !default;
+$float-label-rtl-value: -7px !default;
+
 //enddefault
 //dimensions
 @mixin input-sizing {

package/styles/input/_fabric-definition.scss

@@ -218,7 +218,8 @@ $input-bigger-small-left-child-min-height: $zero-value !default;
 $input-bigger-small-left-child-min-width: $zero-value !default;
 $input-icon-inner-width: $zero-value !default;
 $input-icon-inner-height: $zero-value !default;
-$input-readonly-bg-color: none !default;;
+$input-readonly-bg-color: none !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_fluent-dark-definition.scss

@@ -0,0 +1 @@
+@import './fluent-definition.scss';

package/styles/input/_fluent-definition.scss

@@ -33,7 +33,7 @@ $input-small-border-radius: 2px !default;
 $input-bigger-border-radius: 2px !default;
 $input-bigger-small-border-radius: 2px !default;
 $input-groupo-focus-border-radius: 2px !default;
-$input-group-focus-box-shadow: $shadow-focus-ring1 !default;
+$input-group-focus-box-shadow: 0 0 0 1px $primary !default;
 $input-group-icon-border-radius: 3px !default;
 $input-group-child-border-width: $zero-value !default;
 $input-padding: $zero-value !default;
@@ -43,7 +43,7 @@ $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: $zero-value !default;
 $input-focus-padding-bottom: $zero-value !default;
 $input-clear-icon: 10px !default;
-$input-bigger-clear-icon: 12px !default;
+$input-bigger-clear-icon: 14px !default;
 $input-small-clear-icon: 8px !default;
 $input-bigger-small-clear-icon: 12px !default;
 $input-clear-icon-padding: $zero-value !default;
@@ -190,9 +190,9 @@ $input-bigger-small-left-child-min-height: $zero-value !default;
 $input-bigger-small-left-child-min-width: $zero-value !default;
 $input-icon-inner-width: $zero-value !default;
 $input-icon-inner-height: $zero-value !default;
-$input-error-border-shadow: inset 1px 0 $border-error, inset 0 1px $border-error, inset -1px 0 $border-error, inset 0 -1px $border-error !default;
-$input-success-border-shadow: inset 1px 0 $border-success, inset 0 1px $border-success, inset -1px 0 $border-success, inset 0 -1px $border-success !default;
-$input-warning-border-shadow: inset 1px 0 $border-warning, inset 0 1px $border-warning, inset -1px 0 $border-warning, inset 0 -1px $border-warning !default;
+$input-error-border-shadow:  0 0 0 1px  $border-error !default;
+$input-success-border-shadow: 0 0 0 1px $border-success !default;
+$input-warning-border-shadow:  0 0 0 1px $border-warning !default;
 $input-group-border-shadow: $shadow-sm !default;
 $input-group-icon-border-color: $border-dark;
 
@@ -212,6 +212,7 @@ $input-font-color: $content-text-color !default;
 $input-icon-font-color: $icon-color !default;
 $input-clear-icon-color: $icon-color !default;
 $input-clear-icon-hover-color: $icon-color-hover !default;
+$input-clear-icon-hover-bg-color: $content-bg-color-hover  !default;
 $input-accent:  $content-bg-color !default;
 $input-placeholder: $placeholder-text-color !default;
 $input-active-border-color: $input-box-border-focus !default;
@@ -222,7 +223,7 @@ $input-group-border-right-focus: transparent !default;
 $input-group-border-left-focus: transparent !default;
 $input-group-active-border: transparent !default;
 $input-group-pressed-bg: $content-bg-color-alt4 !default;
-$input-hover-bg-color: $content-bg-color-hover !default;
+$input-hover-bg-color: $content-bg-color-hover  !default;
 $input-header-font-color: $placeholder-text-color !default;
 $input-group-border-color-focus: $primary !default;
 $input-group-border-color-hover: $border-alt !default;
@@ -243,6 +244,7 @@ $input-icon-shadow: inset  0 3px 5px rgba(0, 0, 0, .125) !default;
 $input-border-shadow: 0 0 0 3px rgba($primary-light, .25) !default;
 $input-transition-shadow: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
 $border-type: solid !default;
+$float-label-rtl-value: -10px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_highcontrast-definition.scss

@@ -218,7 +218,8 @@ $input-bigger-small-left-child-min-height: $zero-value !default;
 $input-bigger-small-left-child-min-width: $zero-value !default;
 $input-icon-inner-width: $zero-value !default;
 $input-icon-inner-height: $zero-value !default;
-$input-readonly-bg-color: none !default;;
+$input-readonly-bg-color: none !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;

package/styles/input/_highcontrast-light-definition.scss

@@ -226,7 +226,8 @@ $input-child-bigger-margin-top: $zero-value !default;
 $float-input-child-bigger-margin-top: $zero-value !default;
 $input-child-bigger-margin-right:  $zero-value !default;
 $input-disable-group-border-width: $one-value !default;
-$input-readonly-bg-color: none !default;;
+$input-readonly-bg-color: none !default;
+$float-label-rtl-value: -7px !default;
 
 @mixin input-sizing {
   box-sizing: border-box;