Completed header but struggling to center the searchbar in flexbox; will try grid instead

2024-08-05 10:13:20 +03:00
parent f08d4b1a70
commit 5eaae629e2
2 changed files with 38 additions and 2 deletions
--- a/frontend/src/lib/components/searchbar.svelte
+++ b/frontend/src/lib/components/searchbar.svelte
@@ -0,0 +1,35 @@
+<script>
+    import Icon from "./icon.svelte";
+    import SearchIcon from "$lib/images/icons/ui/search.svg";
+</script>
+
+<div class="searchbar">
+    <Icon class="searchbar__icon" image={SearchIcon} size="36px"/>
+    <input class="searchbar__input" type="text" placeholder="Search stuff...">
+</div>
+
+<style>
+    .searchbar {
+
+        display: flex;
+        align-items: center;
+
+        background-color: var(--col_panel_field);
+        border-radius: 30px;
+
+        padding: 10px;
+    }
+
+    .searchbar__input {
+        border: none;
+        background-color: transparent;
+        color: var(--col_text_panel);
+
+        font-size: 18px;
+    }
+
+    .searchbar__input:focus {
+        outline: none;
+    }
+
+</style>