Hover mode for search-bar

kolzchut · Jul 23, 2024 · 5196333 · 5196333
1 parent 04b7931
commit 5196333
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/projects/srm/src/app/homepage/homepage.component.less b/projects/srm/src/app/homepage/homepage.component.less
@@ -188,6 +188,9 @@
                         flex-flow: column;
                         align-items: stretch;
                         width: 100%;
+                        position: relative;
+                        z-index: 1;
+
                         .desktop({
                             padding: 16px 8px;
                         });

diff --git a/projects/srm/src/app/search/search-bar/search-bar.component.less b/projects/srm/src/app/search/search-bar/search-bar.component.less
@@ -78,4 +78,9 @@
             left: 16px;
         }    
     }
+    input:hover {
+        border: 2px solid @color-blue-4;
+        background-color: @color-blue-8;
+        background-image: url(../../../assets/img/icon-search-blue-2.svg);
+    }
 }
diff --git a/projects/srm/src/app/searchbox-header/searchbox-header.component.less b/projects/srm/src/app/searchbox-header/searchbox-header.component.less
@@ -60,9 +60,9 @@
         display: flex;
         flex-flow: row;
         align-items: center;
+        cursor: pointer;
 
         .clickable {
-            cursor: pointer;
             flex: 1 1 auto;
             display: flex;
             flex-flow: row;
@@ -163,6 +163,13 @@
             background-image: url(../../assets/img/icon-search-gray-3.svg);
         }
 
+        &:hover {
+            border-color: @color-blue-4;
+            background-color: @color-blue-8;
+            .search-icon {
+                background-image: url(../../assets/img/icon-search-blue-2.svg);
+            }
+        }
     }
 
     &.homepage {