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

fix: search-box use theme

Browse Source
This commit is contained in:
Roman Hotsiy 2019-12-13 11:29:12 +02:00
parent eaaa99d68e
commit 1bf490c05b
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
3 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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;
}
} }
`; `;

4
src/components/SideMenu/styled.elements.ts
View File

@ -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 }) =>

5
src/theme.ts
View File

@ -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;
}; };