From 63b18b3360f0dde7153b2477bd58cd50876cab8a Mon Sep 17 00:00:00 2001
From: 0x009922 <a.marcius26@gmail.com>
Date: Fri, 18 Jun 2021 14:53:21 +0300
Subject: [PATCH] Fix broken `SInput` error state (#225)

* fix: input & textarea error style

* fix: "placeholder" error color

* fix: handle autofill case

* build: up version to 0.9.7
---
 package.json          |  2 +-
 src/styles/form.scss  | 28 ++++++----------------------
 src/styles/input.scss |  7 +++++++
 3 files changed, 14 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index a56f1866..e9824326 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@soramitsu/soramitsu-js-ui",
-  "version": "0.9.6",
+  "version": "0.9.7",
   "private": false,
   "publishConfig": {
     "registry": "https://nexus.iroha.tech/repository/npm-soramitsu/"
diff --git a/src/styles/form.scss b/src/styles/form.scss
index 12d4a6af..fa70b9a9 100644
--- a/src/styles/form.scss
+++ b/src/styles/form.scss
@@ -23,37 +23,21 @@
         }
       }
       > [class^="s-input"]:not(.s-disabled) {
+        background-color: var(--s-color-status-error-background);
+        border-color: var(--s-color-status-error);
+
         .s-placeholder {
           color: var(--s-color-status-error);
-          background-color: var(--s-color-status-error-background);
         }
+
         input, textarea {
-          background-color: var(--s-color-status-error-background);
           &::placeholder {
             color: var(--s-color-status-error);
           }
         }
-        &:hover {
-          .s-placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: var(--s-color-status-error-background);
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: var(--s-color-status-error);
-          }
-        }
+
         &.s-focused {
-          .s-placeholder,
-          .el-input > input,
-          .el-textarea > textarea {
-            background-color: var(--s-color-base-on-accent);
-          }
-          .el-input > input,
-          .el-textarea > textarea {
-            border-color: var(--s-color-status-error);
-          }
+          background-color: var(--s-color-base-on-accent);
         }
       }
     }
diff --git a/src/styles/input.scss b/src/styles/input.scss
index 09dc378d..4491eff6 100644
--- a/src/styles/input.scss
+++ b/src/styles/input.scss
@@ -93,6 +93,10 @@ $input-padding-left: $s-basic-spacing * 2 - $input-border-width;
     }
   }
 
+  &.s-autofill {
+    background: rgb(232, 240, 254); // chrome auto-fill background
+  }
+
   &--prefix:not(.s-textarea) {
     .s-placeholder {
       padding-left: $input-icon-width + $s-basic-spacing;
@@ -171,6 +175,9 @@ $input-padding-left: $s-basic-spacing * 2 - $input-border-width;
     &:-webkit-autofill {
       color: var(--s-color-base-content-primary) !important;
       animation-name: onAutoFillStart; // Expose a hook for JavaScript when auto fill is shown
+
+      // removing user-agent background with hack
+      transition: background-color 5000s ease-in-out 0s;
     }
     &:not(:-webkit-autofill) {
       animation-name: onAutoFillCancel; // Expose a hook for JS onAutoFillCancel