From 42646d4e5c3b7759acae114ddfd10d72482040ab Mon Sep 17 00:00:00 2001
From: Artem Dzhereleiko <Dgerik2015@gmail.com>
Date: Tue, 10 Dec 2024 17:14:01 +0200
Subject: [PATCH] UI: Refactoring css

---
 .../usage-info-widget.component.scss          | 25 ++++++-------------
 1 file changed, 8 insertions(+), 17 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
index 86f7036276..1de8288241 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/usage-info-widget.component.scss
@@ -16,8 +16,6 @@
 @import "../../../../../../../scss/constants";
 
 :host {
-  --mdc-linear-progress-track-height: 8px;
-  --mdc-linear-progress-active-indicator-height: 8px;
   .tb-card-header {
     display: flex;
     flex-direction: row;
@@ -46,10 +44,18 @@
   }
 
   .tb-usage-items-progress {
+    --mdc-linear-progress-track-height: 8px;
+    --mdc-linear-progress-active-indicator-height: 8px;
     width: 34px;
     @media #{$mat-md} {
       display: none;
     }
+    .mat-mdc-progress-bar {
+      &.critical {
+        --mdc-linear-progress-track-color: rgba(209, 39, 48, 0.06);
+        --mdc-linear-progress-active-indicator-color: #D12730;
+      }
+    }
     .mdc-linear-progress {
       margin-top: 6px;
       margin-bottom: 6px;
@@ -94,18 +100,3 @@
     color: rgba(0, 0, 0, 0.76);
   }
 }
-
-:host ::ng-deep {
-  .tb-usage-items-progress {
-    .mat-mdc-progress-bar {
-      &.critical {
-        .mdc-linear-progress__buffer-bar {
-          background: rgba(209, 39, 48, 0.06);
-        }
-        .mdc-linear-progress__bar-inner {
-          border-top-color: #D12730;
-        }
-      }
-    }
-  }
-}