1 files changed, 62 insertions, 38 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
index a1d56df96e..b562c08514 100644
--- a/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
+++ b/catalog-ui/src/app/ng2/components/ui/canvas-zone/zone-instance/zone-instance.component.less
@@ -1,9 +1,12 @@
-.zone-child {
+@import '../../../../../../assets/styles/variables';
+
+.zone-instance {
     position:relative;
     width:76px;
     margin:5px;
+    opacity:1;
 
-    .zone-child__handle {
+    .zone-instance__handle {
         display:none;
         position:absolute;
         right:4px;
@@ -11,33 +14,34 @@
         width:22px;
         height:22px;
         cursor:pointer;
-        border: solid white 1px;
+        border: solid @main_color_p 1px;
         border-radius: 2px;
         text-align: center;
         font-weight:bold;
     }
 
-    .zone-child__body {
+    .zone-instance__body {
         margin:0 auto;
         width:43px;
         height:43px;
         display:flex;
         padding:3px;
-
     }
 
-    .zone-child__body-content {
+    .zone-instance__body-content {
         border-radius: 2px;
         flex:1;
-        color:white;
-        font-size:18px;
+        color:@main_color_p;
+        font-size:16px;
         text-align:center;       
         display:flex;
         align-items: center;
         justify-content: center;
+        box-shadow:none;
+        transition:box-shadow 5s;
     }
 
-    .zone-child__name {
+    .zone-instance__name {
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
@@ -45,66 +49,86 @@
     }
     /* Dynamic classes below */
 
+    .target-handle {
+        position:absolute;
+        width:18px;
+        height:18px;
+        display:block;
+        top: -4px;
+        right: 10px;
+        background-size: 100% 100%;
+        cursor: url("../../../../../../assets/styles/images/canvas-tagging-icons/policy_2.svg"), pointer;
+
+        &.tagged-policy {
+            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/policy_added.svg');
+        }
+    
+        &.tag-available {
+            background-image: url('../../../../../../assets/styles/images/canvas-tagging-icons/indication.svg');
+        }
+    }
+
+
     &.mode-1, &.mode-2, &.mode-3 { //hover, selected, tag
-        .zone-child__body {
+        .zone-instance__body {
             border:solid 2px;
             border-radius: 2px;
             padding:2px;
             cursor:pointer;
         }
-        .zone-child__handle{
+    }
+
+    &.mode-1, &.mode-2:hover{
+        .zone-instance__handle{
             display:block;
-            cursor:pointer;
         }
     }
 
     &.locked {
-        cursor: default;
+        cursor: inherit;
     }
-    
-    // &:not(.locked):hover .zone-child__handle{
-    //     display:block;
-    // }
-    .zone-child__body {
-        cursor: default;
+
+    &.hiding {
+        opacity:0;
+        .zone-instance__body-content {
+            box-shadow: #CCC 0px 0px 15px;
+        }
     }
-    &.mode-3 .zone-child__handle {
+    
+
+    &.mode-3 .zone-instance__handle {
         width:24px;
         height:24px;
         right:3px;
         top:9px;
         display:block;
         background-image: linear-gradient(-140deg, #009E98 0%, #97D648 100%);
-        border: 2px solid #FFFFFF;
+        border: 2px solid @main_color_p;
         border-radius: 2px;
         box-shadow: inset 2px -2px 3px 0 #007A3E;
-        cursor: pointer;
     }
 
 }
 .sdc-canvas-zone.group-zone {
-    .zone-child__handle {
-        background-color:#009FDB;
-    }
-    .zone-child__body {
-        border-color:#009FDB;
+    .zone-instance__handle {
+        background-color:@main_color_a;
     }
-    .zone-child__body-content {
-        background: #009FDB;
+    .zone-instance__body {
+        border-color:@main_color_a;
+        .zone-instance__body-content {
+            background: @main_color_a;
+        }
     }
 }
 
 .sdc-canvas-zone.policy-zone {
-    .zone-child__handle {
-        background-color:#0568AE;
+    .zone-instance__handle {
+        background-color:@main_color_r;
     }
-    .zone-child__body {
-        border-color:#1287D9;
-        .zone-child__body-content {
-            background: #1287D9;
+    .zone-instance__body {
+        border-color:@main_color_r;
+        .zone-instance__body-content {
+            background: @main_color_r;
         }
     }
-    .zone-child__body-content {
-        background: #0568AE;
-    }
 }
\ No newline at end of file