Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-08-07 13:44:54 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: background-color in search results

Browse Source
This commit is contained in:
Anton Kozachuk 2021-02-13 21:07:29 +02:00
parent 0dce880dce
commit 0f2ef6672b
1 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/SearchBox/styled.elements.tsx
View File

@ -11,11 +11,11 @@ export const SearchWrap = styled.div`
export const SearchInput = styled.input.attrs(() => ({ export const SearchInput = styled.input.attrs(() => ({
className: 'search-input', className: 'search-input',
}))` }))`
width: calc(100% - ${props => props.theme.spacing.unit * 8}px); width: calc(100% - ${(props) => props.theme.spacing.unit * 8}px);
box-sizing: border-box; box-sizing: border-box;
margin: 0 ${props => props.theme.spacing.unit * 4}px; margin: 0 ${(props) => props.theme.spacing.unit * 4}px;
padding: 5px ${props => props.theme.spacing.unit * 2}px 5px padding: 5px ${(props) => props.theme.spacing.unit * 2}px 5px
${props => props.theme.spacing.unit * 4}px; ${(props) => props.theme.spacing.unit * 4}px;
border: 0; border: 0;
border-bottom: 1px solid border-bottom: 1px solid
${({ theme }) => ${({ theme }) =>
@ -26,7 +26,7 @@ export const SearchInput = styled.input.attrs(() => ({
font-family: ${({ theme }) => theme.typography.fontFamily}; font-family: ${({ theme }) => theme.typography.fontFamily};
font-weight: bold; font-weight: bold;
font-size: 13px; font-size: 13px;
color: ${props => props.theme.sidebar.textColor}; color: ${(props) => props.theme.sidebar.textColor};
background-color: transparent; background-color: transparent;
outline: none; outline: none;
`; `;
@ -46,19 +46,19 @@ export const SearchIcon = styled((props: { className?: string }) => (
className: 'search-icon', className: 'search-icon',
})` })`
position: absolute; position: absolute;
left: ${props => props.theme.spacing.unit * 4}px; left: ${(props) => props.theme.spacing.unit * 4}px;
height: 1.8em; height: 1.8em;
width: 0.9em; width: 0.9em;
path { path {
fill: ${props => props.theme.sidebar.textColor}; fill: ${(props) => props.theme.sidebar.textColor};
} }
`; `;
export const SearchResultsBox = styled.div` export const SearchResultsBox = styled.div`
padding: ${props => props.theme.spacing.unit}px 0; padding: ${(props) => props.theme.spacing.unit}px 0;
background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}}; background-color: ${({ theme }) => darken(0.05, theme.sidebar.backgroundColor)}};
color: ${props => props.theme.sidebar.textColor}; color: ${(props) => props.theme.sidebar.textColor};
min-height: 150px; min-height: 150px;
max-height: 250px; max-height: 250px;
border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}}; border-top: ${({ theme }) => darken(0.1, theme.sidebar.backgroundColor)}};
@ -66,6 +66,10 @@ export const SearchResultsBox = styled.div`
margin-top: 10px; margin-top: 10px;
line-height: 1.4; line-height: 1.4;
font-size: 0.9em; font-size: 0.9em;
li {
background-color: inherit;
}
${MenuItemLabel} { ${MenuItemLabel} {
padding-top: 6px; padding-top: 6px;
@ -85,9 +89,9 @@ export const SearchResultsBox = styled.div`
export const ClearIcon = styled.i` export const ClearIcon = styled.i`
position: absolute; position: absolute;
display: inline-block; display: inline-block;
width: ${props => props.theme.spacing.unit * 2}px; width: ${(props) => props.theme.spacing.unit * 2}px;
text-align: center; text-align: center;
right: ${props => props.theme.spacing.unit * 4}px; right: ${(props) => props.theme.spacing.unit * 4}px;
line-height: 2em; line-height: 2em;
vertical-align: middle; vertical-align: middle;
margin-right: 2px; margin-right: 2px;