✨ redesign search bar

fiit-tp7-2023 · Apr 13, 2024 · cdd48eb · cdd48eb
1 parent c9e59a9
commit cdd48eb
Showing 1 changed file with 18 additions and 8 deletions.
diff --git a/components/controls/SearchBar.vue b/components/controls/SearchBar.vue
@@ -1,12 +1,22 @@
 <template>
-  <div
-    class="hidden md:flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-white rounded-md bg-white text-gray-400"
-  >
+  <div class="wrapper">
     <Icon name="mdi:search" size="24" />
-    <input
-      class="bg-transparent outline-none w-full h-full text-black placeholder:text-gray-400"
-      placeholder="Search"
-      type="text"
-    />
+    <input class="address-input" placeholder="Search" type="text" />
   </div>
 </template>
+<style scoped>
+.wrapper {
+  @apply flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-pink-300 rounded-md bg-transparent text-pink-300;
+
+  &:focus-within {
+    @apply border-pink-500 text-pink-500;
+  }
+}
+.address-input {
+  @apply bg-transparent outline-none w-full h-full text-white placeholder:text-pink-100;
+
+  &:focus {
+    @apply placeholder:invisible;
+  }
+}
+</style>