Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-12 07:50:34 +03:00
Code Issues Packages Projects Releases Wiki Activity

Menu items styling update

Browse Source
This commit is contained in:
Roman Hotsiy 2017-11-23 11:53:08 +02:00
parent 14566b3e30
commit 359e57d189
No known key found for this signature in database
GPG Key ID: 5CB7B3ACABA57CB0
2 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Fields/FieldDetail.tsx
View File

@ -12,7 +12,7 @@ export class FieldDetail extends React.PureComponent<FieldDetailProps> {
return ( return (
<div> <div>
<FieldLabel> {this.props.label} </FieldLabel>{' '} <FieldLabel> {this.props.label} </FieldLabel>{' '}
<ExampleValue> {JSON.stringify(this.props.value)} </ExampleValue> <ExampleValue> {this.props.value} </ExampleValue>
</div> </div>
); );
} }

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

@ -89,17 +89,22 @@ export const MenuItemLi = withProps<{ depth: number }>(styled.li)`
export const menuItemDepth = { export const menuItemDepth = {
'0': css` '0': css`
color: rgba(38, 50, 56, 0.4); opacity: 0.7;
text-transform: uppercase; text-transform: uppercase;
font-size: 0.8em; font-size: 0.8em;
padding-bottom: 0; padding-bottom: 0;
cursor: default; cursor: default;
color: ${props => props.theme.colors.text};
`, `,
'1': css` '1': css`
font-weight: 300;
font-size: 0.929em; font-size: 0.929em;
text-transform: uppercase; text-transform: uppercase;
color: ${props => props.theme.colors.main}; &:hover {
color: ${props => props.theme.colors.main};
}
`,
'2': css`
color: ${props => props.theme.colors.text};
`, `,
}; };
@ -109,7 +114,7 @@ export const MenuItemLabel = withProps<{
deprecated?: boolean; deprecated?: boolean;
}>(styled.label)` }>(styled.label)`
cursor: pointer; cursor: pointer;
color: ${props => props.theme.colors.text}; color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)};
margin: 0; margin: 0;
padding: 12.5px ${props => props.theme.spacingUnit}px; padding: 12.5px ${props => props.theme.spacingUnit}px;
display: flex; display: flex;
@ -119,6 +124,10 @@ export const MenuItemLabel = withProps<{
background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')}; background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
${props => (props.deprecated && deprecatedCss) || ''}; ${props => (props.deprecated && deprecatedCss) || ''};
&:hover {
background-color: ${props => menuItemActiveBg(props.depth)};
}
`; `;
export const MenuItemTitle = withProps<{ width?: string }>(styled.span).attrs({ export const MenuItemTitle = withProps<{ width?: string }>(styled.span).attrs({