Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-02-07 13:30:33 +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 (
<div>
<FieldLabel> {this.props.label} </FieldLabel>{' '}
<ExampleValue> {JSON.stringify(this.props.value)} </ExampleValue>
<ExampleValue> {this.props.value} </ExampleValue>
</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 = {
'0': css`
color: rgba(38, 50, 56, 0.4);
opacity: 0.7;
text-transform: uppercase;
font-size: 0.8em;
padding-bottom: 0;
cursor: default;
color: ${props => props.theme.colors.text};
`,
'1': css`
font-weight: 300;
font-size: 0.929em;
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;
}>(styled.label)`
cursor: pointer;
color: ${props => props.theme.colors.text};
color: ${props => (props.active ? props.theme.colors.main : props.theme.colors.text)};
margin: 0;
padding: 12.5px ${props => props.theme.spacingUnit}px;
display: flex;
@ -119,6 +124,10 @@ export const MenuItemLabel = withProps<{
background-color: ${props => (props.active ? menuItemActiveBg(props.depth) : '')};
${props => (props.deprecated && deprecatedCss) || ''};
&:hover {
background-color: ${props => menuItemActiveBg(props.depth)};
}
`;
export const MenuItemTitle = withProps<{ width?: string }>(styled.span).attrs({