source: reactapp/src/Components/Styled/Search.style.js@ 3e98cea

main
Last change on this file since 3e98cea was 3e98cea, checked in by unknown <mlviktor23@…>, 2 years ago

added SearchResults page, hide search dropdown when out of focus

  • Property mode set to 100644
File size: 1.2 KB
Line 
1import styled from "styled-components";
2import searchicon from "../../searchicon.png";
3
4export const SearchBox = styled.input`
5 width: 350px;
6 box-sizing: border-box;
7 border: 2px solid #ccc;
8 font-size: 16px;
9 background-color: #f9f9f9;
10 background-image: url(${searchicon});
11 background-position: 10px 10px;
12 background-repeat: no-repeat;
13 padding: 12px 20px 12px 40px;
14 margin-top: 10px;
15`;
16
17export const SearchDropdown = styled.div`
18 display: ${(props) => props.display};
19 position: absolute;
20 background-color: #f9f9f9;
21 min-width: 160px;
22 box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
23 padding: 12px 16px;
24 z-index: 1;
25 width: 350px;
26 padding: 0;
27`;
28
29export const SearchResult = styled.div`
30 &:hover {
31 background-color: papayawhip;
32 border: 1px solid blue;
33 text-decoration: underline 1px blue;
34 }
35 padding: 10px;
36 border: 1px solid transparent;
37 margin: ${(props) => props.margin};
38`;
39
40export const SearchResultLink = styled.a`
41 text-decoration: none;
42 color: black;
43`;
44
45export const SearchResultText = styled.p`
46 font-weight: ${(props) => props.weight};
47 font-size: ${(props) => props.size};
48`;
49
50export const SearchResultsWrapper = styled.div`
51 margin-top: 140px;
52`;
Note: See TracBrowser for help on using the repository browser.