1 files changed, 73 insertions, 4 deletions
diff --git a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
index 501805be3f..262dfd9be8 100644
--- a/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
+++ b/catalog-ui/src/app/view-models/workspace/tabs/composition/composition.less
@@ -242,6 +242,10 @@
         white-space: nowrap;
     }
 
+    .w-sdc-designer-sidebar-section-title {
+        text-transform: uppercase;
+    }
+
     .w-sdc-designer-sidebar-section-title + .w-sdc-designer-sidebar-section-content {
         margin: 0 auto;
     }
@@ -253,6 +257,8 @@
 
     .i-sdc-designer-sidebar-section-content-item {
         .b_7;
+        font-size: 13px;
+        margin-bottom: 5px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
@@ -668,11 +674,10 @@
     }
 
     .i-sdc-designer-leftbar-section-content-item-info-title {
-        .m_14_m;
+        .m_13_m;
         line-height: 14px;
         overflow: hidden;
         text-overflow: ellipsis;
-        text-transform: uppercase;
         max-width: 120px;
         display: inline-block;
         white-space: nowrap;
@@ -680,12 +685,11 @@
     }
 
     .i-sdc-designer-leftbar-section-content-item-info-text {
-        .p_3;
+        .m_13_r;
         line-height: 15px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        //margin: -1px 0 2px 0;
     }
 
     .i-sdc-designer-leftbar-section-content-item-info-text-link {
@@ -777,6 +781,71 @@
         line-height: 18px;
     }
 
+    //Canvas search menu
+    .w-sdc-search-menu {
+        position:absolute;
+        right: 18px;
+        top:53px;
+        transition: right 0.2s;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        margin-right:10px;
+
+        &.with-sidebar {
+            right:320px;
+        }
+
+        .search-with-autocomplete-container.composition-search {
+            margin-top: 12px;
+
+            .search-bar-input {
+                width: 250px;
+                padding:2px 50px 2px 10px;
+                transition:all 0.4s;
+            }
+            .clear-search-x {
+                top: 17px
+            }
+
+            &:not(:hover):not(.autocomplete-visible):not(.active){
+                border-radius: 0;
+                box-shadow:none;
+
+                .search-bar-input:not(:focus){
+                    width: 0px;
+                    padding:0;
+                    border:none;
+                }
+                .clear-search-x {
+                    display:none;
+                }
+                .search-bar-input:not(:focus) ~ .search-bar-button {
+                    border-radius: 2px;
+                    border:solid 1px #fff;
+                }
+            } 
+        }
+
+        .zoom-icons {
+            border:solid 1px #fff;
+            border-radius: 2px;
+            box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+            background-color:  rgba(234, 234, 234, 0.88);
+            background-repeat: no-repeat;
+            margin-top: 10px;
+
+            &:hover {
+                cursor:pointer;
+            }
+
+            &:active {
+                border:none;
+                background-color:  rgba(31, 171, 223, 0.88);
+            }
+        }
+    }
+
     // ---------------------------------------------------------------------------------------------------
     // Canvas inline menu
     // ---------------------------------------------------------------------------------------------------