#152 made the searchbar visible while its hovered

DarkIntaqt · Apr 4, 2023 · e8c4fdf · e8c4fdf
1 parent bd013e3
commit e8c4fdf
Showing 1 changed file with 16 additions and 6 deletions.
diff --git 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 {