Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

1 files changed, 42 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less
new file mode 100644
index 0000000000..247f2a3913
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less
@@ -0,0 +1,42 @@
+.canvas-search-component {
+
+  .canvas-search-bar-container {
+    display:flex;
+    border-radius: 4px;
+    align-items: center;
+    box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+
+    /deep/.sdc-search-bar .search-bar-container .search-button {
+      border: solid 1px #d2d2d2;
+    }
+
+    /deep/.sdc-input__input {
+      width: 250px;
+      transition: all 0.4s;
+    }
+
+    .canvas-clear-search {
+      position: absolute;
+      right: 45px;
+    }
+  }
+
+  &:not(:hover):not(.canvas-search-visible):not(.active) {
+    border-radius: 0;
+    box-shadow: none;
+
+    /deep/.sdc-input__input:not(:focus) {
+      border: none;
+      padding: 0px;
+      width: 0px;
+    }
+    .canvas-clear-search {
+      display: none;
+    }
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
\ No newline at end of file