From 75e9e453218bf4ec1e03c274f66865ed4bbb2be9 Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 30 Mar 2023 20:17:53 +0300
Subject: [PATCH] UI: Improve filled text field style

---
 ui-ngx/src/theme-overwrites.scss | 24 +++++++-----------------
 1 file changed, 7 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/theme-overwrites.scss b/ui-ngx/src/theme-overwrites.scss
index 0644ecccd9..394e4f0f12 100644
--- a/ui-ngx/src/theme-overwrites.scss
+++ b/ui-ngx/src/theme-overwrites.scss
@@ -21,27 +21,25 @@
 
 @mixin _mat-form-field-overwrites($primary, $config-or-theme) {
   .mat-mdc-form-field.mat-form-field-appearance-fill {
-    .mdc-text-field--filled {
+    .mdc-text-field--filled, .mat-mdc-form-field-focus-overlay {
       &:before {
         content: "";
+        display: block;
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
         background-color: mat.get-color-from-palette($primary);
-        opacity: 0.03;
       }
       background-color: transparent;
+    }
+    .mdc-text-field--filled {
+      &:before {
+        opacity: 0.03;
+      }
       &:not(.mdc-text-field--disabled) {
         &:before {
-          content: "";
-          width: 100%;
-          height: 100%;
-          position: absolute;
-          left: 0;
-          top: 0;
-          background-color: mat.get-color-from-palette($primary);
           opacity: 0.06;
         }
         background-color: transparent;
@@ -49,16 +47,8 @@
     }
     .mat-mdc-form-field-focus-overlay {
       &:before {
-        content: "";
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        top: 0;
-        background-color: mat.get-color-from-palette($primary);
         opacity: 0.87;
       }
-      background-color: transparent;
     }
   }
 }