From e8c4fdfe8cd417c2719b973d8330e4d72b8111e1 Mon Sep 17 00:00:00 2001
From: DarkIntaqt <61588850+DarkIntaqt@users.noreply.github.com>
Date: Tue, 4 Apr 2023 10:55:41 +0200
Subject: [PATCH] #152 made the searchbar  visible while its hovered

---
 styles/index.module.scss | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/styles/index.module.scss b/styles/index.module.scss
index f639f58..115b881 100644
--- a/styles/index.module.scss
+++ b/styles/index.module.scss
@@ -105,7 +105,8 @@
                width: fit-content;
                position: relative;
 
-               &:hover {
+               &:hover,
+               &:focus {
                   .inner {
                      outline: 2px solid $light3;
                   }
@@ -209,7 +210,8 @@
       }
    }
 
-   &.active {
+   &.active,
+   &:hover {
 
       .results {
          visibility: visible;
@@ -234,6 +236,15 @@
       }
    }
 
+   &.active {
+
+      .searchbar {
+         border: 2px solid $selected;
+         box-shadow: 0 0 5px $selected;
+      }
+
+   }
+
    .searchbar {
       position: relative;
       z-index: 10;
@@ -243,6 +254,9 @@
       box-shadow: 0 0 5px #000;
       background-color: $dark2;
       border-radius: 10px;
+      border: 2px solid transparent;
+
+      transition: .25s box-shadow, .25s border, .25s color, .25s background-color;
 
       overflow: hidden;
 
@@ -251,8 +265,6 @@
       align-items: center;
       justify-content: center;
 
-      transition: .25s color, .25s background-color;
-
       input {
          flex: 1;
          background-color: $dark2;
@@ -264,8 +276,6 @@
 
          color: $light3;
          transition: .25s color, .25s background-color;
-
-
       }
 
       select {