crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Finished responsive styling for search input / autosuggest

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-21 15:37:17 +02:00
committed by fabioberger
parent bfaaefaf0a
commit d100897b20
1 changed files with 48 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
packages/website/ts/components/docs/search/autocomplete.tsx
View File

@@ -110,6 +110,7 @@ const Overlay = styled.div`
const Wrapper = styled.div<Props>`
position: relative;
min-width: 240px;
${({ isHome }) =>
isHome &&
@@ -125,30 +126,48 @@ const Wrapper = styled.div<Props>`
font-size: 22px;
padding: 18px 18px 21px 35px;
width: 100%;
border: 0;
border-bottom: 1px solid #b4bebd;
outline: none;
border: 1px solid transparent;
&--open {
border-bottom-color: ${colors.brandLight};
}
${({ isHome }) =>
isHome &&
`
border-bottom-color: #b4bebd;
@media (max-width: 900px) {
border: none;
}
&--open {
border-bottom-color: ${colors.brandLight};
@media (max-width: 900px) {
border-bottom-color: transparent;
}
}
`};
${({ isHome }) =>
!isHome &&
`
background-color: #EBEEEC;
border-bottom: 0;
padding: 13px 21px 15px 52px;
background-position: left 21px center;
font-size: 1rem;
@media (min-width: 800px) {
position: absolute;
right: 30px;
top: -24px;
width: 240px;
}
&--focused,
&--open {
background-color: white;
border: 1px solid #dbdfdd;
border-bottom-color: ${colors.brandLight};
@media (min-width: 800px) {
width: 900px;
}
}
`};
@@ -164,18 +183,20 @@ const Wrapper = styled.div<Props>`
}
.react-autosuggest__container {
border: 1px solid orangered;
&--open {
background-color: ${colors.white};
border-color: #dbdfdd;
}
${({ isHome }) =>
isHome &&
`
border: 1px solid transparent;
padding: 13px 30px;
&--open {
border: 1px solid #dbdfdd;
}
@media (max-width: 900px) {
padding: 13px 18px;
}
@@ -223,8 +244,7 @@ const Wrapper = styled.div<Props>`
.react-autosuggest__suggestions-container {
position: absolute;
right: 0;
left: 0;
background-color: ${colors.white};
z-index: 10;
@@ -235,10 +255,23 @@ const Wrapper = styled.div<Props>`
border-top: none;
}
${({ isHome }) =>
isHome &&
`
right: 0;
left: 0;
`};
${({ isHome }) =>
!isHome &&
`
top: 50px;
width: 100%;
@media (min-width: 800px) {
width: 900px;
right: 30px;
top: 28px;
}
`};
}