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