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

[WIP] restyling search input in the header

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-12 15:02:57 +02:00
committed by fabioberger
parent 2ecd9672c2
commit e374469818
1 changed files with 22 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -149,6 +149,12 @@ const Wrapper = styled.div<Props>`
background-color: ${colors.white}; background-color: ${colors.white};
border-color: #dbdfdd; border-color: #dbdfdd;
} }
${({ isHome }) =>
!isHome &&
`
border: 1px solid green;
`};
} }
.react-autosuggest__section-container { .react-autosuggest__section-container {
@@ -160,14 +166,19 @@ const Wrapper = styled.div<Props>`
right: 0; right: 0;
background-color: ${colors.white}; background-color: ${colors.white};
z-index: 10; z-index: 10;
min-width: 420px; width: 890px;
width: 100%;
flex-grow: 1; flex-grow: 1;
&--open { &--open {
border: 1px solid #dbdfdd; border: 1px solid #dbdfdd;
border-top: none; border-top: none;
} }
${({ isHome }) =>
!isHome &&
`
top: 50px;
`};
} }
.react-autosuggest__suggestions-list { .react-autosuggest__suggestions-list {
@@ -192,6 +203,15 @@ const Wrapper = styled.div<Props>`
padding: 13px 21px 15px 52px; padding: 13px 21px 15px 52px;
background-position: left 21px center; background-position: left 21px center;
font-size: 1rem; font-size: 1rem;
&--focused,
&--open {
background-color: white;
width: 890px;
position: absolute;
right: 0;
top: 0;
}
`}; `};
&--open { &--open {