source: imaps-frontend/src/components/SearchBar/SearchBar.module.css@ 0c6b92a

main
Last change on this file since 0c6b92a was 0c6b92a, checked in by stefan toskovski <stefantoska84@…>, 5 weeks ago

Pred finalna verzija

  • Property mode set to 100644
File size: 1.8 KB
Line 
1.wrapper {
2 position: relative;
3 display: flex;
4 justify-content: center;
5 margin: 0 auto;
6 z-index: 105;
7 max-width: 600px;
8 width: 100%;
9 padding: 10px;
10}
11
12.searchBar,
13.directionsContainer {
14 position: relative;
15 display: flex;
16 align-items: center;
17 /*width: 100%;*/
18 background-color: white;
19 padding: 10px;
20 border: 1px solid #ddd;
21 border-radius: 30px;
22 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
23 flex-wrap: nowrap;
24}
25
26.inputField {
27 flex-grow: 1;
28 padding: 10px 15px;
29 font-size: 16px;
30 border: 1px solid #ddd;
31 border-radius: 30px;
32 outline: none;
33 margin-right: 10px;
34 min-width: 0;
35
36}
37
38.dropdown {
39 position: absolute; /* Position absolute to detach from wrapper flow */
40 top: 100%; /* Place below the search bar */
41 left: 0;
42 background-color: white;
43 border: 1px solid #ddd;
44 border-radius: 5px;
45 width: 100%; /* Match the search bar width */
46 max-height: 200px;
47 overflow-y: auto;
48 z-index: 9999; /* Highest level to ensure it's above everything */
49 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
50}
51
52
53.dropdownItem {
54 padding: 10px;
55 cursor: pointer;
56 transition: background-color 0.3s ease, color 0.3s ease;
57}
58
59.dropdownItem:hover {
60 background-color: #007bff; /* Highlight color */
61 color: white; /* Ensure text is readable */
62}
63
64
65.buttons {
66 display: flex;
67 justify-content: flex-end;
68 gap: 10px;
69}
70
71.iconButton {
72 display: flex;
73 align-items: center;
74 justify-content: center;
75 background-color: transparent;
76 border: none;
77 padding: 12px 20px;
78 border-radius: 10px;
79 background-color: #f0f0f0;
80 color: black;
81 cursor: pointer;
82 font-size: 16px;
83 transition: background-color 0.3s ease;
84}
85
86.iconButton:hover {
87 background-color: #e0e0e0;
88}
89
90.iconButton img {
91 width: 20px;
92 height: 20px;
93}
94
95.directionsContainer {
96 gap: 10px;
97}
98
99.directionsInputs {
100 display: flex;
101 width: 100%;
102 gap: 10px;
103}
Note: See TracBrowser for help on using the repository browser.