Changeset 3e98cea for reactapp/src/Components/Styled/Search.style.js

Timestamp:

08/06/22 18:16:44 (2 years ago)

Author:

unknown <mlviktor23@…>

Branches:

main

Children:

800779d

Parents:

d654c74

Message:

added SearchResults page, hide search dropdown when out of focus

File:

• reactapp/src/Components/Styled/Search.style.js (moved) (moved from reactapp/src/Components/Search.style.js ) (4 diffs)

reactapp/src/Components/Styled/Search.style.js

@@ -1 +1 @@
 import styled from "styled-components";
-import searchicon from "../searchicon.png";
+import searchicon from "../../searchicon.png";
 
-export const SearchSmall = styled.input`
+export const SearchBox = styled.input`
   width: 350px;
   box-sizing: border-box;
@@ -15 +15 @@
 `;
 
-export const SearchDropdownSmall = styled.div`
+export const SearchDropdown = styled.div`
   display: ${(props) => props.display};
   position: absolute;
@@ -27 +27 @@
 `;
 
-export const SearchDropdownResultSmall = styled.div`
+export const SearchResult = styled.div`
   &:hover {
     background-color: papayawhip;
@@ -34 +34 @@
   }
   padding: 10px;
+  border: 1px solid transparent;
+  margin: ${(props) => props.margin};
 `;
 
-export const SearchDropdownResultLinkSmall = styled.a`
+export const SearchResultLink = styled.a`
   text-decoration: none;
   color: black;
 `;
 
-export const SearchDropdownTextSmall = styled.p`
+export const SearchResultText = styled.p`
   font-weight: ${(props) => props.weight};
   font-size: ${(props) => props.size};
 `;
+
+export const SearchResultsWrapper = styled.div`
+  margin-top: 140px;
+`;