Changeset 0df6b9e for reactapp/src/Components/Search.style.js

Timestamp:

08/01/22 19:18:54 (2 years ago)

Author:

Viktor <mlviktor23@…>

Branches:

main

Children:

d654c74

Parents:

080a3f3

Message:

styled searchbar

File:

• reactapp/src/Components/Search.style.js (modified) (2 diffs)

reactapp/src/Components/Search.style.js

@@ -1 +1 @@
 import styled from "styled-components";
+import searchicon from "../searchicon.png";
+
+export const SearchSmall = styled.input`
+  width: 350px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  font-size: 16px;
+  background-color: #f9f9f9;
+  background-image: url(${searchicon});
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding: 12px 20px 12px 40px;
+  margin-top: 10px;
+`;
 
 export const SearchDropdownSmall = styled.div`
-  display: block;
+  display: ${(props) => props.display};
+  position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
@@ -8 +23 @@
   padding: 12px 16px;
   z-index: 1;
+  width: 350px;
+  padding: 0;
 `;
 
-export const SearchDropdownContentSmall = styled.p`
+export const SearchDropdownResultSmall = styled.div`
+  &:hover {
+    background-color: papayawhip;
+    border: 1px solid blue;
+    text-decoration: underline 1px blue;
+  }
+  padding: 10px;
+`;
+
+export const SearchDropdownResultLinkSmall = styled.a`
+  text-decoration: none;
+  color: black;
+`;
+
+export const SearchDropdownTextSmall = styled.p`
   font-weight: ${(props) => props.weight};
   font-size: ${(props) => props.size};