source:
reactapp/src/Components/Styled/Search.style.js@
9bf1f8d
Last change on this file since 9bf1f8d was 9bf1f8d, checked in by , 20 months ago | |
---|---|
|
|
File size: 1.2 KB |
Rev | Line | |
---|---|---|
[080a3f3] | 1 | import styled from "styled-components"; |
[3e98cea] | 2 | import searchicon from "../../searchicon.png"; |
[0df6b9e] | 3 | |
[3e98cea] | 4 | export const SearchBox = styled.input` |
[9bf1f8d] | 5 | width: 450px; |
[0df6b9e] | 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 | `; | |
[080a3f3] | 16 | |
[3e98cea] | 17 | export const SearchDropdown = styled.div` |
[0df6b9e] | 18 | display: ${(props) => props.display}; |
19 | position: absolute; | |
[080a3f3] | 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; | |
[9bf1f8d] | 25 | width: 450px; |
[0df6b9e] | 26 | padding: 0; |
27 | `; | |
28 | ||
[3e98cea] | 29 | export const SearchResult = styled.div` |
[0df6b9e] | 30 | &:hover { |
31 | background-color: papayawhip; | |
[702ca77] | 32 | border: 1px solid #0066cc; |
33 | text-decoration: underline 1px #0066cc; | |
[0df6b9e] | 34 | } |
35 | padding: 10px; | |
[3e98cea] | 36 | border: 1px solid transparent; |
37 | margin: ${(props) => props.margin}; | |
[0df6b9e] | 38 | `; |
39 | ||
[3e98cea] | 40 | export const SearchResultLink = styled.a` |
[0df6b9e] | 41 | text-decoration: none; |
42 | color: black; | |
[080a3f3] | 43 | `; |
44 | ||
[3e98cea] | 45 | export const SearchResultText = styled.p` |
[080a3f3] | 46 | font-weight: ${(props) => props.weight}; |
47 | font-size: ${(props) => props.size}; | |
48 | `; | |
[3e98cea] | 49 | |
50 | export const SearchResultsWrapper = styled.div` | |
51 | margin-top: 140px; | |
52 | `; |
Note:
See TracBrowser
for help on using the repository browser.