Extract search bar into a standalone component and fix header design.

2024-08-30 09:52:00 +02:00
parent 090143fdae
commit b3a52f6a4b
7 changed files with 141 additions and 55 deletions
--- a/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
+++ b/frontend/src/app/components/publications-search-bar/publications-search-bar.component.scss
@@ -0,0 +1,37 @@
+:host {
+    $borderRadiusValue: 10em;
+    position: relative;
+    flex-direction: row;
+    align-items: center;
+
+    form {
+        display: flex;
+
+        input {
+            flex: 1;
+            border-radius: $borderRadiusValue;
+            background-color: white;
+            border: solid 1px #ddd;
+            padding: .2em 2.7em .2em 1em;
+            height: 2em;
+            width: 100%;
+        }
+    
+        button {
+            position: absolute;
+            display: flex;
+            align-items: center;
+            border-radius: $borderRadiusValue;
+            background-color: white;
+            border: none;
+            top: .4em;
+            right: 0;
+            color: #aaaaaa;
+    
+            &:hover {
+                background-color: #eee;
+                cursor: pointer;
+            }
+        }
+    }
+}