@syncfusion/ej2-inputs 19.2.59 → 19.3.47

package/styles/input/_theme.scss

@@ -50,7 +50,9 @@
   .e-float-input.e-control-wrapper textarea[disabled],
   .e-float-input.e-disabled,
   .e-float-input.e-control-wrapper.e-disabled  {
-    -webkit-text-fill-color: $input-disable-font-color;
+    @if $input-skin-name != 'bootstrap5' {
+      -webkit-text-fill-color: $input-disable-font-color;
+    }
     background: $input-disable-bg-color;
     color: $input-disable-font-color;
     @if $input-skin-name == 'material' {
@@ -91,14 +93,24 @@
   .e-float-input textarea[readonly],
   .e-float-input.e-control-wrapper textarea[readonly] {
     background: $input-readonly-bg-color;
-    @if $input-skin-name == 'bootstrap4' {
+    @if $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       color: $input-readonly-color;
     }
-    @if $input-skin-name != 'bootstrap4' {
+    @if $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' {
       color: inherit;
     }
   }
 
+  .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 {
+    @if $input-skin-name == 'bootstrap5' {
+      background: $input-readonly-bg-color;
+      color: $input-icon-font-color;
+    }
+  }
+
   .e-float-input.e-disabled input,
   .e-float-input.e-control-wrapper.e-disabled input,
   .e-float-input.e-disabled textarea,
@@ -128,7 +140,7 @@
 
   .e-input-group:not(.e-disabled) .e-input-group-icon:hover,
   .e-input-group.e-control-wrapper:not(.e-disabled) .e-input-group-icon:hover {
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
       background: $input-hover-bg-color;
     }
     @if $input-skin-name == 'bootstrap4' {
@@ -779,24 +791,42 @@
   }
 
   .e-input-group.e-success .e-input-group-icon,
+  .e-input-group.e-control-wrapper.e-success .e-input-group-icon {
+    color: $input-icon-font-color;
+  }
+
   .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-  .e-input-group.e-control-wrapper.e-success .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
     color: $input-icon-font-color;
+    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' {
+      color: $input-group-hovered-color;
+    }
   }
 
   .e-input-group.e-warning .e-input-group-icon,
+  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
+    color: $input-icon-font-color;
+  }
+
   .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-  .e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
     color: $input-icon-font-color;
+    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' {
+      color: $input-group-hovered-color;
+    }
   }
 
   .e-input-group.e-error .e-input-group-icon,
+  .e-input-group.e-control-wrapper.e-error .e-input-group-icon {
+    color: $input-icon-font-color;
+  }
+
   .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-  .e-input-group.e-control-wrapper.e-error .e-input-group-icon,
   .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
     color: $input-icon-font-color;
+    @if $input-skin-name == 'bootstrap5' or $input-skin-name == 'bootstrap4' {
+      color: $input-group-hovered-color;
+    }
   }
 
   .e-input-group.e-success:not(.e-disabled) .e-input-group-icon:active,
@@ -840,9 +870,9 @@
       -webkit-box-shadow: $input-border-shadow;
       box-shadow: $input-border-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark'  {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5'  {
       border-radius: $input-groupo-focus-border-radius;
-      box-shadow: $imput-group-focus-box-shadow;
+      box-shadow: $input-group-focus-box-shadow;
     }
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
@@ -857,7 +887,7 @@
   .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
   .e-input-group .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
   .e-input-group .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark'  {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5'  {
       box-shadow: none;
     }
   }
@@ -870,7 +900,7 @@
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input,
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning).e-error:not(.e-input-group).e-input-focus input {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-error-border-shadow;
       box-shadow: $input-error-border-shadow;
     }
@@ -884,7 +914,7 @@
   .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input,
   .e-float-input.e-control-wrapper:not(.e-error):not(.e-warning).e-success:not(.e-input-group).e-input-focus input {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5'  {
       -webkit-box-shadow: $input-success-border-shadow;
       box-shadow: $input-success-border-shadow;
     }
@@ -898,7 +928,7 @@
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group) textarea:focus,
   .e-float-input:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input,
   .e-float-input.e-control-wrapper:not(.e-success):not(.e-error).e-warning:not(.e-input-group).e-input-focus input {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-warning-border-shadow;
       box-shadow: $input-warning-border-shadow;
     }
@@ -946,17 +976,17 @@
     @if $input-skin-name == 'bootstrap4'  {
       transition: $input-transition-shadow;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark'  {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5'  {
       border-color: $input-group-border-color-focus;
       border-radius: $input-groupo-focus-border-radius;
-      box-shadow: $imput-group-focus-box-shadow;
+      box-shadow: $input-group-focus-box-shadow;
     }
   }
 
   // sass-lint:disable no-vendor-prefixes 
   .e-input-group.e-input-focus:not(.e-success):not(.e-warning).e-error,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning).e-error {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-error-border-shadow;
       box-shadow: $input-error-border-shadow;
     }
@@ -965,7 +995,7 @@
   // sass-lint:disable no-vendor-prefixes 
   .e-input-group.e-input-focus:not(.e-error):not(.e-warning).e-success,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-error):not(.e-warning).e-success {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5'  {
       -webkit-box-shadow: $input-success-border-shadow;
       box-shadow: $input-success-border-shadow;
     }
@@ -974,7 +1004,7 @@
   // sass-lint:disable no-vendor-prefixes 
   .e-input-group.e-input-focus:not(.e-success):not(.e-error).e-warning,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-error).e-warning {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-warning-border-shadow;
       box-shadow: $input-warning-border-shadow;
     }
@@ -1006,7 +1036,7 @@
   .e-input-focus.e-control-wrapper.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
   .e-input-focus.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span.e-input-group-icon {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' ) {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' ) {
       border-color:  $input-group-border-left-focus;
     }
    }
@@ -1017,7 +1047,7 @@
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon,
   .e-input-group.e-control-wrapper.e-input-focus.e-rtl:not(.e-success):not(.e-warning):not(.e-error) .e-input:last-child:focus,
   .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) span:first-child.e-input-group-icon {
-    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' ) {
+    @if ($input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5') {
       border-color: transparent;
     }
    }
@@ -1038,7 +1068,7 @@
     @if $input-skin-name != 'material' {
       border-color: $input-group-full-border-color;
     }
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' {
       box-shadow: $input-group-border-shadow;
     }
   }
@@ -1046,18 +1076,21 @@
   // sass-lint:disable no-vendor-prefixes 
   .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error),
   .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'highcontrast' {
+    @if $input-skin-name == 'fabric' or $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' or $input-skin-name == 'highcontrast' {
       border-color: $input-active-border-color;
     }
     @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
       -webkit-box-shadow: $input-border-shadow;
       box-shadow: $input-border-shadow;
     }
+    @if $input-skin-name == 'bootstrap5' {
+      box-shadow: $input-group-focus-box-shadow;
+    }
   }
 
   .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error,
   .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-warning).e-error {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-error-border-shadow;
       box-shadow: $input-error-border-shadow;
     }
@@ -1065,7 +1098,7 @@
 
   .e-input-group:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success,
   .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-error):not(.e-warning).e-success {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-success-border-shadow;
       box-shadow: $input-success-border-shadow;
     }
@@ -1073,7 +1106,7 @@
 
   .e-input-group:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning,
   .e-input-group.e-control-wrapper:not(.e-disabled):active:not(.e-success):not(.e-error).e-warning {
-    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4'  {
+    @if $input-skin-name == 'bootstrap' or $input-skin-name == 'bootstrap4' or $input-skin-name == 'bootstrap5' {
       -webkit-box-shadow: $input-warning-border-shadow;
       box-shadow: $input-warning-border-shadow;
     }
@@ -1638,7 +1671,7 @@
   .e-float-input.e-control-wrapper:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
   .e-float-input.e-control-wrapper:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-    @if $input-skin-name != 'material' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' and $input-skin-name != 'tailwind-dark' {
+    @if $input-skin-name != 'material' and $input-skin-name != 'bootstrap' and $input-skin-name != 'bootstrap4' and $input-skin-name != 'bootstrap5' and $input-skin-name != 'highcontrast' and $input-skin-name != 'tailwind' {
       border-color: $input-group-border-color-hover;
     }
   }
@@ -1773,7 +1806,7 @@
   .e-outline.e-float-input.e-input-group,
   .e-outline.e-float-input.e-control-wrapper,
   .e-outline.e-float-input.e-input-group.e-control-wrapper {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-input-font-color;
     }
   }
@@ -1784,7 +1817,7 @@
   .e-outline.e-float-input.e-input-group.e-disabled,
   .e-outline.e-float-input.e-control-wrapper.e-disabled,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-disabled-input-font-color;
     }
   }
@@ -1797,9 +1830,9 @@
   .e-outline.e-float-input.e-float-icon-left:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
   .e-outline.e-float-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),
   .e-outline.e-float-input:hover:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $outline-hover-border-color;
-      color: $outline-hover-border-color;
+      color: $outline-hover-font-color;
     }
   }
 
@@ -1819,14 +1852,14 @@
   .e-outline.e-float-input.e-control-wrapper.e-float-icon-left.e-valid-input:not(.e-input-focus):hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after,
   .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::before,
   .e-outline.e-float-input:hover.e-valid-input:not(.e-input-focus):not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $outline-hover-border-color;
     }
   }
 
   .e-outline.e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
   .e-outline.e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-active-border-color;
       box-shadow: inset 1px 1px $input-active-border-color, inset -1px 0 $input-active-border-color, inset 0 -1px $input-active-border-color;
     }
@@ -1837,7 +1870,7 @@
   .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
   .e-outline.e-input-group.e-float-icon-left:not(.e-input-focus),
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $outline-border-color;
     }
   }
@@ -1850,7 +1883,7 @@
   .e-outline.e-float-input.e-input-group.e-error,
   .e-outline.e-float-input.e-control-wrapper.e-error,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-error-color;
     }
   }
@@ -1873,7 +1906,7 @@
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus,
   .e-outline.e-float-input.e-input-group.e-error.e-input-focus:not(.e-float-icon-left),
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-error.e-input-focus:not(.e-float-icon-left) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: transparent;
     }
   }
@@ -1886,7 +1919,7 @@
   .e-outline.e-float-input.e-input-group.e-success,
   .e-outline.e-float-input.e-control-wrapper.e-success,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-success {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-success-color;
     }
   }
@@ -1899,28 +1932,28 @@
   .e-outline.e-float-input.e-input-group.e-warning,
   .e-outline.e-float-input.e-control-wrapper.e-warning,
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-warning {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $input-warning-color;
     }
   }
 
   .e-outline.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
   .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px 1px $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
     }
   }
 
   .e-outline.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
   .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px 1px $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
     }
   }
 
   .e-outline.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
   .e-outline.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px 1px $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
     }
   }
@@ -1929,7 +1962,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning),
   .e-outline.e-float-input.e-input-group.e-input-focus.e-error:not(.e-success):not(.e-warning),
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-error:not(.e-success):not(.e-warning) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px $zero-value $input-error-color, inset -1px $zero-value $input-error-color, inset $zero-value -1px $input-error-color;
     }
   }
@@ -1938,7 +1971,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning),
   .e-outline.e-float-input.e-input-group.e-input-focus.e-success:not(.e-error):not(.e-warning),
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-success:not(.e-error):not(.e-warning) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px $zero-value $input-success-color, inset -1px $zero-value $input-success-color, inset $zero-value -1px $input-success-color;
     }
   }
@@ -1947,7 +1980,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success),
   .e-outline.e-float-input.e-input-group.e-input-focus.e-warning:not(.e-error):not(.e-success),
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-input-focus.e-warning:not(.e-error):not(.e-success) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       box-shadow: inset 1px $zero-value $input-warning-color, inset -1px $zero-value $input-warning-color, inset $zero-value -1px $input-warning-color;
     }
   }
@@ -1957,7 +1990,7 @@
   .e-outline.e-input-group.e-control-wrapper.e-disabled:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
   .e-outline.e-input-group.e-disabled.e-float-icon-left:not(.e-input-focus),
   .e-outline.e-input-group.e-disabled.e-control-wrapper.e-float-icon-left:not(.e-input-focus) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $outline-disabled-border-color;
     }
   }
@@ -2012,7 +2045,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-success.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-success.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-success.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $input-success-color;
     }
   }
@@ -2067,7 +2100,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-error.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-error.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $input-error-color;
     }
   }
@@ -2122,7 +2155,7 @@
   .e-small .e-outline.e-float-input.e-control-wrapper.e-warning.e-input-focus input ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-small.e-bigger.e-warning.e-input-focus input ~ label.e-float-text,
   .e-bigger .e-outline.e-float-input.e-control-wrapper.e-small.e-warning.e-input-focus input ~ label.e-float-text {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $input-warning-color;
     }
   }
@@ -2131,7 +2164,7 @@
   .e-outline.e-float-input.e-input-group.e-input-focus label.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-valid-input.e-input-focus label.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-input-group.e-input-focus label.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $input-active-border-color;
     }
   }
@@ -2151,7 +2184,7 @@
   .e-outline.e-input-group.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap,
   .e-outline.e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left).e-disabled,
   .e-outline.e-input-group.e-control-wrapper.e-float-icon-left:not(.e-success):not(.e-warning):not(.e-error).e-disabled .e-input-in-wrap {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       background-image: none;
       border-bottom-color: $outline-disabled-border-color;
       border-color: $outline-disabled-border-color;
@@ -2161,7 +2194,7 @@
   .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-input-focus),
   .e-outline.e-float-input.e-input-group.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus),
   .e-outline.e-float-input.e-input-group.e-control-wrapper.e-disabled.e-valid-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-float-icon-left):not(.e-input-focus) {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-top-color: transparent;
     }
   }
@@ -2178,7 +2211,7 @@
   .e-outline.e-disabled.e-float-input.e-valid-input:not(.e-input-focus) label.e-float-text::after,
   .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::before,
   .e-outline.e-disabled.e-float-input.e-control-wrapper.e-valid-input:not(.e-input-focus) label.e-float-text::after {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       border-color: $outline-disabled-border-color;
     }
   }
@@ -2197,7 +2230,7 @@
   .e-outline.e-float-input.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-float-label-disbale-font-color;
     }
   }
@@ -2212,7 +2245,7 @@
   .e-outline.e-float-input.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-float-label-disbale-font-color;
     }
   }
@@ -2241,7 +2274,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) input[disabled] ~ label.e-float-text.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-float-label-disbale-font-color;
     }
   }
@@ -2266,7 +2299,7 @@
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text,
   .e-outline.e-float-input.e-control-wrapper.e-disabled.e-small.e-bigger:not(.e-error) textarea[disabled] ~ label.e-float-text.e-label-top {
-    @if $skin-name == 'material' {
+    @if $input-skin-name == 'material' {
       color: $outline-float-label-disbale-font-color;
     }
   }
@@ -3016,28 +3049,28 @@
 
   // sass-lint:disable no-vendor-prefixes
   .e-input-group textarea.e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
       color: $input-placeholder-color;
     }
   }
 
   // sass-lint:disable no-vendor-prefixes
   .e-input-group textarea.e-input:-moz-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
       color: $input-placeholder-color;
     }
   }
 
   // sass-lint:disable no-vendor-prefixes
   .e-input-group .e-input:-ms-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
       color: $input-placeholder-color;
     }
   }
 
   // sass-lint:disable no-vendor-prefixes
   input.e-input#{$css}::-webkit-input-placeholder {
-    @if $input-skin-name == 'tailwind' or $input-skin-name == 'tailwind-dark' {
+    @if $input-skin-name == 'tailwind' or $input-skin-name == 'bootstrap5' {
       color: $input-placeholder-color;
     }
   }

package/styles/input/bootstrap-dark.css

@@ -4059,22 +4059,31 @@ textarea.e-input::-webkit-input-placeholder {
 }
 
 .e-input-group.e-success .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-success .e-input-group-icon {
+  color: #f0f0f0;
+}
+
 .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-success .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #f0f0f0;
 }
 
 .e-input-group.e-warning .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
+  color: #f0f0f0;
+}
+
 .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #f0f0f0;
 }
 
 .e-input-group.e-error .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-error .e-input-group-icon {
+  color: #f0f0f0;
+}
+
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-error .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #f0f0f0;
 }

package/styles/input/bootstrap.css

@@ -4059,22 +4059,31 @@ textarea.e-input::-webkit-input-placeholder {
 }
 
 .e-input-group.e-success .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-success .e-input-group-icon {
+  color: #333;
+}
+
 .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-success .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #333;
 }
 
 .e-input-group.e-warning .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
+  color: #333;
+}
+
 .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #333;
 }
 
 .e-input-group.e-error .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-error .e-input-group-icon {
+  color: #333;
+}
+
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-error .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #333;
 }

package/styles/input/bootstrap4.css

@@ -4041,24 +4041,36 @@ textarea.e-input::-webkit-input-placeholder {
 }
 
 .e-input-group.e-success .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-success .e-input-group-icon {
+  color: #495057;
+}
+
 .e-input-group.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-success .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-success:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
+  color: #fff;
 }
 
 .e-input-group.e-warning .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-warning .e-input-group-icon {
+  color: #495057;
+}
+
 .e-input-group.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-warning .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-warning:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
+  color: #fff;
 }
 
 .e-input-group.e-error .e-input-group-icon,
+.e-input-group.e-control-wrapper.e-error .e-input-group-icon {
+  color: #495057;
+}
+
 .e-input-group.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover,
-.e-input-group.e-control-wrapper.e-error .e-input-group-icon,
 .e-input-group.e-control-wrapper.e-error:not(.e-disabled):not(:active) .e-input-group-icon:hover {
   color: #495057;
+  color: #fff;
 }
 
 .e-input-group input.e-input,