mirror of
https://github.com/Redocly/redoc.git
synced 2025-07-11 08:42:24 +03:00
fix: search-box use theme
This commit is contained in:
parent
eaaa99d68e
commit
1bf490c05b
|
@ -1,6 +1,6 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { darken } from 'polished';
|
import { darken, getLuminance, lighten } from 'polished';
|
||||||
import styled from '../../styled-components';
|
import styled from '../../styled-components';
|
||||||
import { MenuItemLabel } from '../SideMenu/styled.elements';
|
import { MenuItemLabel } from '../SideMenu/styled.elements';
|
||||||
|
|
||||||
|
@ -17,7 +17,12 @@ export const SearchInput = styled.input.attrs(() => ({
|
||||||
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 ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
|
border-bottom: 1px solid
|
||||||
|
${({ theme }) =>
|
||||||
|
(getLuminance(theme.menu.backgroundColor) > 0.5 ? darken : lighten)(
|
||||||
|
0.1,
|
||||||
|
theme.menu.backgroundColor,
|
||||||
|
)};
|
||||||
font-family: ${({ theme }) => theme.typography.fontFamily};
|
font-family: ${({ theme }) => theme.typography.fontFamily};
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
@ -52,11 +57,12 @@ export const SearchIcon = styled((props: { className?: string }) => (
|
||||||
|
|
||||||
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: #ededed;
|
background-color: ${({ theme }) => darken(0.05, theme.menu.backgroundColor)}};
|
||||||
|
color: ${props => props.theme.menu.textColor};
|
||||||
min-height: 150px;
|
min-height: 150px;
|
||||||
max-height: 250px;
|
max-height: 250px;
|
||||||
border-top: 1px solid #e1e1e1;
|
border-top: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
|
||||||
border-bottom: 1px solid #e1e1e1;
|
border-bottom: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)}};
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
|
@ -65,17 +71,14 @@ export const SearchResultsBox = styled.div`
|
||||||
padding-top: 6px;
|
padding-top: 6px;
|
||||||
padding-bottom: 6px;
|
padding-bottom: 6px;
|
||||||
|
|
||||||
&:hover {
|
&:hover,
|
||||||
background-color: #e1e1e1;
|
&.active {
|
||||||
|
background-color: ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
|
||||||
}
|
}
|
||||||
|
|
||||||
> svg {
|
> svg {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
|
||||||
background-color: #e1e1e1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|
|
@ -104,7 +104,7 @@ export const menuItemDepth = {
|
||||||
font-size: 0.929em;
|
font-size: 0.929em;
|
||||||
text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
|
text-transform: ${({ theme }) => theme.menu.level1Items.textTransform};
|
||||||
&:hover {
|
&:hover {
|
||||||
color: ${props => props.theme.colors.primary.main};
|
color: ${props => props.theme.menu.activeTextColor};
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
2: css`
|
2: css`
|
||||||
|
@ -126,7 +126,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
|
||||||
}),
|
}),
|
||||||
}))<MenuItemLabelType>`
|
}))<MenuItemLabelType>`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: ${props => (props.active ? props.theme.colors.primary.main : props.theme.menu.textColor)};
|
color: ${props => (props.active ? props.theme.menu.activeTextColor : props.theme.menu.textColor)};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
|
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
|
||||||
${({ depth, type, theme }) =>
|
${({ depth, type, theme }) =>
|
||||||
|
|
|
@ -126,6 +126,10 @@ const defaultTheme: ThemeInterface = {
|
||||||
width: '260px',
|
width: '260px',
|
||||||
backgroundColor: '#fafafa',
|
backgroundColor: '#fafafa',
|
||||||
textColor: '#333333',
|
textColor: '#333333',
|
||||||
|
activeTextColor: theme =>
|
||||||
|
theme.menu.textColor !== defaultTheme.menu!.textColor
|
||||||
|
? theme.menu.textColor
|
||||||
|
: theme.colors.primary.main,
|
||||||
groupItems: {
|
groupItems: {
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
},
|
},
|
||||||
|
@ -296,6 +300,7 @@ export interface ResolvedThemeInterface {
|
||||||
width: string;
|
width: string;
|
||||||
backgroundColor: string;
|
backgroundColor: string;
|
||||||
textColor: string;
|
textColor: string;
|
||||||
|
activeTextColor: string;
|
||||||
groupItems: {
|
groupItems: {
|
||||||
textTransform: string;
|
textTransform: string;
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue
Block a user