From 3eb469b80243c4aa83dda606f9cae3fac5e1ec16 Mon Sep 17 00:00:00 2001
From: dobromirts <dobromir.ts@gmail.com>
Date: Mon, 23 Aug 2021 10:00:34 +0300
Subject: [PATCH] Fix SignalR sample icons - vnext

---
 .../grid-finjs-dock-manager.component.scss    | 196 +++++++++---------
 1 file changed, 99 insertions(+), 97 deletions(-)

diff --git a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
index 4d4bfa2ec2..de40362888 100644
--- a/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
+++ b/projects/app-lob/src/app/grid-finjs-dock-manager/grid-finjs-dock-manager.component.scss
@@ -4,82 +4,117 @@
     margin-bottom: 20px;
 }
 
-:host ::ng-deep {
-    .grid-area {
-        margin-top: 1rem;
-        overflow-y: hidden;
-        overflow-x: hidden;
-        width: 100%;
+.finjs-icons {
+    display: flex;
+    align-items: center;
+    igx-icon {
+        font-size: 16px;
+        width: 16px;
+        height: 16px;
+        margin-left: 4px;
     }
+}
 
-    .finjs-icons {
-        display: flex;
-        align-items: center;
-        igx-icon {
-            font-size: 16px;
-            width: 16px;
-            height: 16px;
-            margin-left: 4px;
-        }
+.changePos,
+.changeNeg,
+.strongPositive,
+.strongNegative {
+    color: #fff !important;
+    .igx-grid__td-text {
+        padding: 2px 5px;
     }
-
-    .changePos,
-    .changeNeg,
-    .strongPositive,
-    .strongNegative {
-        color: #fff !important;
-        .igx-grid__td-text {
-            padding: 2px 5px;
-        }
-    }
-    .positive {
-        color: #4eb862 !important;
+}
+.positive {
+    color: #4eb862 !important;
+}
+.positive.strongPositive {
+    .igx-grid__td-text {
+        color: rgba(78, 184, 98, 0.8) !important;
     }
-    .positive.strongPositive {
-        .igx-grid__td-text {
-            color: rgba(78, 184, 98, 0.8) !important;
-        }
+}
+.negative {
+    color: #d31642 !important;
+}
+.negative.strongNegative {
+    .igx-grid__td-text {
+        color: rgba(255, 19, 74, 0.8) !important;
     }
-    .negative {
-        color: #d31642 !important;
+}
+// NORMAL
+// positive
+.changePos {
+    .igx-grid__td-text {
+        background: #335e3b;
     }
-    .negative.strongNegative {
-        .igx-grid__td-text {
-            color: rgba(255, 19, 74, 0.8) !important;
-        }
+}
+.changePos1 {
+    background: #335e3b;
+    color: #fff;
+}
+.changePos2 {
+    .igx-grid__td-text {
+        border-right: 4px solid #335e3b;
+        padding-right: 15px;
     }
-    // NORMAL
-    // positive
-    .changePos {
-        .igx-grid__td-text {
-            background: #335e3b;
-        }
+}
+// negative
+.changeNeg {
+    .igx-grid__td-text {
+        background: #7a1c32;
     }
-    .changePos1 {
-        background: #335e3b;
-        color: #fff;
+}
+.changeNeg1 {
+    color: #fff;
+    background: #7a1c32;
+}
+.changeNeg2 {
+    .igx-grid__td-text {
+        border-right: 4px solid #7a1c32;
+        padding-right: 9px;
     }
-    .changePos2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #335e3b;
-            padding-right: 15px;
-        }
+}
+
+// STRONG
+// positive
+.strongPositive {
+    .igx-grid__td-text {
+        background: #459a55;
     }
-    // negative
-    .changeNeg {
-        .igx-grid__td-text {
-            background: #7a1c32;
-        }
+}
+.strongPositive1 {
+    background: #459a55;
+    color: #fff;
+}
+.strongPositive2 {
+    .igx-grid__td-text {
+        border-right: 4px solid #459a55;
+        padding-right: 15px;
     }
-    .changeNeg1 {
+}
+// negative
+.strongNegative {
+    .igx-grid__td-text {
+        background: #d31642;
         color: #fff;
-        background: #7a1c32;
     }
-    .changeNeg2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #7a1c32;
-            padding-right: 9px;
-        }
+}
+.strongNegative1 {
+    background: #d31642;
+    color: #fff;
+}
+.strongNegative2 {
+    .igx-grid__td-text {
+        border-right: 4px solid #d31642;
+        padding-right: 9px;
+    }
+}
+
+:host ::ng-deep {
+    .grid-area {
+        margin-top: 1rem;
+        overflow-y: hidden;
+        overflow-x: hidden;
+        width: 100%;
     }
 
     // selected
@@ -101,40 +136,7 @@
             color: #fff;
         }
     }
-    // STRONG
-    // positive
-    .strongPositive {
-        .igx-grid__td-text {
-            background: #459a55;
-        }
-    }
-    .strongPositive1 {
-        background: #459a55;
-        color: #fff;
-    }
-    .strongPositive2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #459a55;
-            padding-right: 15px;
-        }
-    }
-    // negative
-    .strongNegative {
-        .igx-grid__td-text {
-            background: #d31642;
-            color: #fff;
-        }
-    }
-    .strongNegative1 {
-        background: #d31642;
-        color: #fff;
-    }
-    .strongNegative2 {
-        .igx-grid__td-text {
-            border-right: 4px solid #d31642;
-            padding-right: 9px;
-        }
-    }
+    
     // selected
     .igx-grid__td--column-selected.strongPositive1,
     .igx-grid__td--column-selected.strongPositive2,