@syncfusion/ej2-inputs 19.4.52 → 20.1.55

package/styles/input/_layout.scss

@@ -102,7 +102,29 @@
 
   .e-input.e-small,
   .e-input-group.e-small,
-  .e-input-group.e-control-wrapper.e-small {
+  .e-input-group.e-control-wrapper.e-small,
+  .e-input-group.e-small .e-input,
+  .e-input-group.e-small input,
+  .e-input-group.e-control-wrapper.e-small .e-input,
+  .e-input-group.e-control-wrapper.e-small input,
+  .e-float-input.e-small input,
+  .e-float-input.e-input-group.e-small input,
+  .e-float-input.e-control-wrapper.e-small input,
+  .e-float-input.e-control-wrapper.e-input-group.e-small input,
+  .e-float-input.e-small,
+  .e-float-input.e-control-wrapper.e-small,
+  .e-small .e-input-group,
+  .e-small .e-input-group.e-control-wrapper,
+  .e-small .e-input-group .e-input,
+  .e-small .e-input-group input,
+  .e-small .e-input-group.e-control-wrapper .e-input,
+  .e-small .e-input-group.e-control-wrapper input,
+  .e-small .e-float-input input,
+  .e-small .e-float-input.e-input-group input,
+  .e-small .e-float-input.e-control-wrapper input,
+  .e-small .e-float-input.e-control-wrapper.e-input-group input,
+  .e-small .e-float-input,
+  .e-small .e-float-input.e-control-wrapper {
     @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-small-border-radius;
     }
@@ -175,29 +197,70 @@
   .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 {
     @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-bigger-border-radius;
     }
     font-size: $input-bigger-font-size;
   }
 
+  .e-input-group.e-bigger .e-input,
+  .e-input-group.e-bigger input,
+  .e-input-group.e-control-wrapper.e-bigger .e-input,
+  .e-input-group.e-control-wrapper.e-bigger input,
+  .e-float-input.e-bigger input,
+  .e-float-input.e-input-group.e-bigger input,
+  .e-float-input.e-control-wrapper.e-bigger input,
+  .e-float-input.e-control-wrapper.e-input-group.e-bigger input,
+  .e-float-input.e-bigger,
+  .e-float-input.e-control-wrapper.e-bigger,
+  .e-bigger .e-input-group .e-input,
+  .e-bigger .e-input-group input,
+  .e-bigger .e-input-group.e-control-wrapper .e-input,
+  .e-bigger .e-input-group.e-control-wrapper input,
+  .e-bigger .e-float-input input,
+  .e-bigger .e-float-input.e-input-group input,
+  .e-bigger .e-float-input.e-control-wrapper input,
+  .e-bigger .e-float-input.e-control-wrapper.e-input-group input,
+  .e-bigger .e-float-input,
+  .e-bigger .e-float-input.e-control-wrapper {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
+      border-radius: $input-bigger-border-radius;
+    }
+  }
+
   input.e-input.e-bigger.e-small#{$css},
   textarea.e-input.e-bigger.e-small#{$css},
   .e-bigger.e-small input.e-input#{$css},
   .e-bigger.e-small textarea.e-input#{$css},
   .e-input-group.e-bigger.e-small,
   .e-bigger.e-small .e-input-group,
-  .e-input-group.e-control-wrapper.e-biggere-small,
-  .e-bigger.e-small .e-input-group.e-control-wrapper,
-  .e-input-group.e-bigger.e-small.e-disabled,
-  .e-bigger.e-small .e-input-group.e-disabled,
-  .e-input-group.e-control-wrapper.e-bigger.e-small.e-disabled,
-  .e-bigger.e-small .e-input-group.e-control-wrapper.e-disabled {
+  .e-bigger.e-small .e-input-group.e-control-wrapper {
+    @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
+      border-radius: $input-bigger-small-border-radius;
+    }
+  }
+
+  .e-input-group.e-bigger.e-small .e-input,
+  .e-input-group.e-bigger.e-small input,
+  .e-input-group.e-control-wrapper.e-bigger.e-small .e-input,
+  .e-input-group.e-control-wrapper.e-bigger.e-small input,
+  .e-float-input.e-bigger.e-small input,
+  .e-float-input.e-input-group.e-bigger.e-small input,
+  .e-float-input.e-control-wrapper.e-bigger.e-small input,
+  .e-float-input.e-control-wrapper.e-input-group.e-bigger.e-small input,
+  .e-float-input.e-bigger.e-small,
+  .e-float-input.e-control-wrapper.e-bigger.e-small,
+  .e-bigger.e-small .e-input-group .e-input,
+  .e-bigger.e-small .e-input-group input,
+  .e-bigger.e-small .e-input-group.e-control-wrapper .e-input,
+  .e-bigger.e-small .e-input-group.e-control-wrapper input,
+  .e-bigger.e-small .e-float-input input,
+  .e-bigger.e-small .e-float-input.e-input-group input,
+  .e-bigger.e-small .e-float-input.e-control-wrapper input,
+  .e-bigger.e-small .e-float-input.e-control-wrapper.e-input-group input,
+  .e-bigger.e-small .e-float-input,
+  .e-bigger.e-small .e-float-input.e-control-wrapper {
     @if ($input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5') {
       border-radius: $input-bigger-small-border-radius;
     }
@@ -338,7 +401,7 @@
   .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
     @if ($input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5') {
       border-left-width: $zero-value;
-      border-right-width: 1px;
+      border-right: 1px solid $input-box-border-color;
     }
   }
 
@@ -900,8 +963,8 @@
   .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: $input-bigger-small-icon-font-size;
@@ -1873,7 +1936,7 @@
   .e-rtl.e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-float-input textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-rtl .e-float-input.e-control-wrapper textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom {
-    right: $zero-value;
+    right: 0;
     transform-origin: right top;
   }
 
@@ -3649,6 +3712,10 @@
   .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,
@@ -3995,9 +4062,12 @@
     @if $input-skin-name == 'material' {
       top: -20px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       top: 14px;
     }
+    @else if $input-skin-name == 'tailwind' {
+      top: 12px;
+    }
   }
 
   .e-float-input.e-small textarea:focus ~ label.e-float-text,
@@ -4033,9 +4103,12 @@
     @if $input-skin-name == 'material' {
       top: -20px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       top: 16px;
     }
+    @else if $input-skin-name == 'tailwind' {
+      top: 15px;
+    }
   }
 
   // Floating label on the top of the textarea
@@ -4044,9 +4117,12 @@
     @if $input-skin-name == 'material' {
       top: -11px;
     }
-    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' or $input-skin-name == 'tailwind' {
+    @else if $input-skin-name == 'fabric' or $input-skin-name == 'FluentUI' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       top: 15px;
     }
+    @else if $input-skin-name == 'tailwind' {
+      top: 13px;
+    }
   }
 
   .e-float-input.e-small textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -5124,9 +5200,6 @@
     @if $input-skin-name == 'material' {
       min-height: $input-bigger-min-height;
     }
-    @if $input-skin-name == 'tailwind' {
-      min-height: $input-bigger-height;
-    }
   }
 
   .e-bigger input.e-input.e-small,
@@ -6160,6 +6233,33 @@
     }
   }
 
+  .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-bigger .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
+    @if $input-skin-name == 'material' {
+      line-height: $outline-textarea-bigger-label-line-height;
+    }
+  }
+
   .e-outline.e-float-input.e-bigger:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-bigger.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-bigger .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -6191,6 +6291,26 @@
     }
   }
 
+  .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
+    @if $input-skin-name == 'material' {
+      line-height: $outline-textarea-small-label-line-height;
+    }
+  }
+
   .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
@@ -6215,6 +6335,18 @@
     }
   }
 
+  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text {
+    @if $input-skin-name == 'material' {
+      line-height: $outline-textarea-label-line-height;
+    }
+  }
+
   .e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,
@@ -6249,6 +6381,38 @@
     }
   }
 
+  .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-small.e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-small .e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-small .e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-small .e-bigger.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-small .e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-bigger .e-small.e-outline.e-float-input:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-small.e-outline:not(.e-valid-input):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid) ~ label.e-float-text,
+  .e-bigger .e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-bigger .e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):not(:valid):not(.e-valid-input) ~ label.e-float-text,
+  .e-outline.e-float-input.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small:not(.e-error):not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small.e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small.e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small .e-outline.e-float-input:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom,
+  .e-bigger.e-small .e-outline.e-float-input.e-control-wrapper:not(.e-valid-input):not(.e-input-focus) textarea:valid ~ label.e-float-text.e-label-bottom {
+    @if $input-skin-name == 'material' {
+      line-height: $outline-textarea-small-bigger-label-line-height;
+    }
+  }
+
   .e-small.e-bigger.e-outline.e-float-input:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger.e-outline.e-float-input.e-control-wrapper:not(.e-error):not(.e-valid-input) textarea:not(:focus):valid ~ label.e-float-text.e-label-bottom,
   .e-small.e-bigger.e-outline:not(.e-valid-input):not(.e-valid-input) textarea:not(:focus):not(:valid) ~ label.e-float-text,

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

@@ -215,6 +215,7 @@ $input-min-height: 19px !default;
 $textarea-min-height: 23px !default;
 $input-bigger-min-height: 23px !default;
 $input-bigger-smaller-min-height: 19px !default;
+$float-label-rtl-value: -7px !default;
 
 $input-left-icon-font-size: 20px !default;
 $input-bigger-left-icon-font-size: 20px !default;

package/styles/input/_material-definition.scss

@@ -214,6 +214,7 @@ $input-min-height: 19px !default;
 $textarea-min-height: 23px !default;
 $input-bigger-min-height: 23px !default;
 $input-bigger-smaller-min-height: 19px !default;
+$float-label-rtl-value: -7px !default;
 
 $input-left-icon-font-size: 20px !default;
 $input-bigger-left-icon-font-size: 20px !default;
@@ -229,7 +230,7 @@ $input-bigger-small-left-child-min-height: 30px !default;
 $input-bigger-small-left-child-min-width: 30px !default;
 $input-icon-inner-width: 10px !default;
 $input-icon-inner-height: 10px !default;
-$input-readonly-bg-color: none !default;;
+$input-readonly-bg-color: none !default;
 
 // Outline textbox
 

package/styles/input/_tailwind-definition.scss

@@ -42,10 +42,10 @@ $float-label-padding: 10px !default;
 $float-input-wrap-padding-top: $zero-value !default;
 $input-padding-bottom: 4px !default;
 $input-focus-padding-bottom: $zero-value !default;
-$input-clear-icon: $text-base !default;
-$input-bigger-clear-icon: $text-lg !default;
-$input-small-clear-icon: $text-sm !default;
-$input-bigger-small-clear-icon: $text-sm !default;
+$input-clear-icon: $text-lg !default;
+$input-bigger-clear-icon: 22px !default;
+$input-small-clear-icon: $text-base !default;
+$input-bigger-small-clear-icon: $text-xl !default;
 $input-clear-icon-padding: $zero-value !default;
 $input-clear-icon-position: center !default;
 $input-bigger-padding: 7px 0 7px 16px !default;
@@ -53,10 +53,10 @@ $float-input-bigger-padding: $zero-value !default;
 $float-input-bigger-wrap-padding-top: $zero-value !default;
 $input-bigger-padding-bottom: 7px !default;
 $input-focus-bigger-padding-bottom: 7px !default;
-$input-child-padding: 5px 4px 5px 4px !default;
+$input-child-padding: 5px 8px 5px 4px !default;
 $input-child-min-height: 18px !default;
 $input-child-min-width: 20px !default;
-$input-bigger-child-padding: 7px 8px 7px 8px !default;
+$input-bigger-child-padding: 7px 12px 7px 6px !default;
 $input-bigger-child-min-height: 18px !default;
 $input-bigger-child-min-width: 20px !default;
 $input-margin-bottom: $zero-value !default;
@@ -77,10 +77,10 @@ $float-input-bigger-small-padding: $zero-value !default;
 $float-input-bigger-small-wrap-padding-top: $zero-value !default;
 $input-bigger-small-padding-bottom: 6px !default;
 $input-focus-bigger-small-padding-bottom: 6px !default;
-$input-bigger-small-child-padding: 5px !default;
+$input-bigger-small-child-padding: 6px !default;
 $input-bigger-small-child-min-height: 18px !default;
 $input-bigger-small-child-min-width: 20px !default;
-$input-small-child-padding: 3px 1.5px 3px 1.5px !default;
+$input-small-child-padding: 3px 6px 3px 3px !default;
 $input-small-child-min-height: 18px !default;
 $input-small-child-min-width: 20px !default;
 $input-font-family: $font-family !default;
@@ -133,7 +133,7 @@ $float-placeholder-bigger-small-font-size: 12px !default;
 $input-border-size: 2px !default;
 $input-normal-height: 28px !default;
 $input-bigger-height: 36px !default;
-$input-small-height: 26px !default;
+$input-small-height: 24px !default;
 $input-bigger-small-height: 34px - $input-border-size !default;
 $float-input-normal-height: 30px !default;
 $float-input-bigger-height: 38px !default;
@@ -146,16 +146,16 @@ $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: 18px !default;
+$input-icon-font-size: $text-lg !default;
 $input-bigger-icon-font-size: 22px !default;
-$input-small-icon-font-size: 16px !default;
-$input-bigger-small-icon-font-size: 20px !default;
+$input-small-icon-font-size: $text-base !default;
+$input-bigger-small-icon-font-size: $text-xl !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;
 $input-clear-icon-padding-left: $zero-value !default;
 $input-clear-icon-padding-top: $zero-value !default;
-$float-input-clear-icon-padding-top: 5px !default;
+$float-input-clear-icon-padding-top: $zero-value !default;
 $input-clear-icon-small-bigger-padding-bottom: $zero-value !default;
 $input-clear-icon-small-bigger-padding-right: $zero-value !default;
 $input-clear-icon-small-bigger-padding-top: $zero-value !default;
@@ -169,13 +169,13 @@ $input-clear-icon-bigger-padding-right: $zero-value !default;
 $input-clear-icon-bigger-padding-top: $zero-value !default;
 $float-input-clear-icon-bigger-padding-top: $zero-value !default;
 $input-clear-icon-min-height: $zero-value !default;
-$input-clear-icon-min-width: 28px !default;
+$input-clear-icon-min-width: 32px !default;
 $input-bigger-clear-icon-min-height: $zero-value !default;
-$input-bigger-clear-icon-min-width: 34px !default;
+$input-bigger-clear-icon-min-width: 38px !default;
 $input-bigger-small-clear-icon-min-height: $zero-value !default;
 $input-bigger-small-clear-icon-min-width: 34px !default;
-$input-small-clear-icon-min-height: 28px !default;
-$input-small-clear-icon-min-width: 28px !default;
+$input-small-clear-icon-min-height: 24px !default;
+$input-small-clear-icon-min-width: 24px !default;
 $input-left-icon-font-size: $zero-value !default;
 $input-bigger-left-icon-font-size: $zero-value !default;
 $input-small-left-icon-font-size: $zero-value !default;
@@ -194,6 +194,7 @@ $input-error-border-shadow: none !default;
 $input-success-border-shadow: none !default;
 $input-warning-border-shadow: none !default;
 $input-group-border-shadow: $shadow-sm !default;
+$float-label-rtl-value: 0 !default;
 
 // color
 

package/styles/input/_theme.scss

@@ -107,7 +107,8 @@
   .e-input-group .e-input[readonly] ~ span.e-input-group-icon,
   .e-input-group.e-control-wrapper .e-input[readonly] ~ span.e-input-group-icon,
   .e-float-input input[readonly] ~ span.e-input-group-icon,
-  .e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon {
+  .e-float-input.e-control-wrapper input[readonly] ~ span.e-input-group-icon,
+  .e-float-input.e-control-wrapper input[readonly] ~ span.e-clear-icon {
     @if $input-skin-name == 'bootstrap5' {
       background: $input-readonly-bg-color;
       color: $input-icon-font-color;
@@ -1027,7 +1028,7 @@
   .e-input-group.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
   .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) span:last-child.e-input-group-icon {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' ) {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'FluentUI' and $input-skin-name != 'bootstrap5') {
       border-color: $input-group-border-right-focus;
     }
   }
@@ -1239,6 +1240,9 @@
   .e-input-group .e-clear-icon:hover,
   .e-input-group.e-control-wrapper .e-clear-icon:hover {
     color: $input-clear-icon-hover-color;
+    @if ($input-skin-name == 'FluentUI') {
+      background: $input-clear-icon-hover-bg-color;
+    }
   }
 
   .e-float-input:not(.e-disabled) .e-clear-icon:hover,
@@ -1248,6 +1252,9 @@
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
       color: $input-clear-icon-hover-color;
     }
+    @if ($input-skin-name == 'FluentUI') {
+      background: $input-clear-icon-hover-bg-color;
+    }
   }
 
   .e-float-input.e-disabled .e-clear-icon,

package/styles/input/bootstrap-dark.css

@@ -152,11 +152,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;
 }
 
@@ -251,7 +247,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #767676;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -538,8 +534,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;
@@ -2769,6 +2765,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,

package/styles/input/bootstrap.css

@@ -152,11 +152,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;
 }
 
@@ -251,7 +247,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #ccc;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -538,8 +534,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;
@@ -2769,6 +2765,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,

package/styles/input/bootstrap4.css

@@ -152,11 +152,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: 16px;
 }
 
@@ -251,7 +247,7 @@ textarea.e-input.e-bigger,
 .e-rtl .e-input-group input ~ .e-input-group-icon,
 .e-rtl .e-input-group.e-control-wrapper input ~ .e-input-group-icon {
   border-left-width: 0;
-  border-right-width: 1px;
+  border-right: 1px solid #ced4da;
 }
 
 .e-input-group.e-rtl input ~ .e-input-group-icon + .e-input-group-icon,
@@ -538,8 +534,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;
@@ -2769,6 +2765,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,