Changeset 0c6b92a for imaps-frontend/src/components/SearchBar/SearchBar.module.css

Timestamp:

12/12/24 17:06:06 (5 weeks ago)

Author:

stefan toskovski <stefantoska84@…>

Branches:

main

Parents:

d565449

Message:

Pred finalna verzija

File:

• imaps-frontend/src/components/SearchBar/SearchBar.module.css (modified) (6 diffs)

imaps-frontend/src/components/SearchBar/SearchBar.module.css

@@ -1 +1 @@
 .wrapper {
+  position: relative;
   display: flex;
   justify-content: center;
-  margin: 0px auto;
+  margin: 0 auto;
+  z-index: 105;
   max-width: 600px;
   width: 100%;
+  padding: 10px;
 }
 
 .searchBar,
 .directionsContainer {
+  position: relative;
   display: flex;
-  align-items: end; /* Ensure all items remain aligned in the center */
-  width: 100%;
+  align-items: center;
+  /*width: 100%;*/
   background-color: white;
   padding: 10px;
@@ -17 +21 @@
   border-radius: 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
+  flex-wrap: nowrap;
 }
 
@@ -28 +32 @@
   outline: none;
   margin-right: 10px;
-  min-width: 0; /* Ensure the input field remains flexible */
+  min-width: 0;
+
 }
+
+.dropdown {
+  position: absolute; /* Position absolute to detach from wrapper flow */
+  top: 100%; /* Place below the search bar */
+  left: 0;
+  background-color: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  width: 100%; /* Match the search bar width */
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 9999; /* Highest level to ensure it's above everything */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+
+.dropdownItem {
+  padding: 10px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.dropdownItem:hover {
+  background-color: #007bff; /* Highlight color */
+  color: white; /* Ensure text is readable */
+}
+
 
 .buttons {
@@ -50 +82 @@
   font-size: 16px;
   transition: background-color 0.3s ease;
-  width: auto;
 }
 
@@ -62 +93 @@
 }
 
-/* Expanded view for the direction inputs */
 .directionsContainer {
-  flex-direction: column;
   gap: 10px;
 }
@@ -73 +102 @@
   gap: 10px;
 }
-
-.directionsInputs .inputField {
-  flex: 1;
-}
-
-/* Media query for responsive design */
-@media (max-width: 768px) {
-  .wrapper {
-    max-width: 100%;
-    padding: 10px;
-  }
-
-  /* Keep buttons and input fields inline */
-  .searchBar,
-  .directionsContainer {
-    flex-direction: row; /* Keep items in a row */
-    align-items: center; /* Keep buttons and inputs on the same line */
-    flex-wrap: nowrap; /* Prevent items from wrapping */
-    padding: 8px;
-  }
-
-  .inputField {
-    width: 100%;
-    flex-grow: 1;
-    margin-right: 10px;
-  }
-
-  .buttons {
-    width: auto;
-    gap: 5px;
-  }
-
-  .iconButton {
-    width: auto;
-    padding: 10px;
-  }
-}