New dashboard look & feel

[src/xds/xds-agent.git] / webapp / src / app / @theme / components / search-input / search-input.component.scss

diff --git a/webapp/src/app/@theme/components/search-input/search-input.component.scss b/webapp/src/app/@theme/components/search-input/search-input.component.scss
new file mode 100644 (file)
index 0000000..5ef07ef
--- /dev/null
+++ b/webapp/src/app/@theme/components/search-input/search-input.component.scss
@@ -0,0 +1,33 @@
+:host {
+  display: flex;
+  align-items: center;
+
+  i.control-icon {
+    &::before {
+      font-size: 2.3rem;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  input {
+    border: none;
+    outline: none;
+    margin-left: 1rem;
+    width: 15rem;
+    transition: width 0.2s ease;
+
+    &.hidden {
+      width: 0;
+      margin: 0;
+    }
+  }
+
+  /deep/ search-input {
+    input {
+      background: transparent;
+    }
+  }
+}