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

feat theme add sidebar activeBackgroundColor and activeTextColor

Browse Source
This commit is contained in:
Loïc Fürhoff 2021-04-30 17:05:18 +02:00
parent 4b072be8d1
commit 8a227eaa0f
3 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -293,21 +293,24 @@ You can use all of the following options with standalone version on <redoc> tag
* `color`: # COMPUTED: colors.primary.main
* `visited`: # COMPUTED: typography.links.color
* `hover`: # COMPUTED: lighten(0.2 typography.links.color)
* `menu`
* `sidebar`
* `width`: '260px'
* `backgroundColor`: '#fafafa'
* `textColor`: '#333333'
* `activeTextColor`: # COMPUTED: theme.menu.textColor (if set by user) or theme.colors.primary.main
* `activeTextColor`: # COMPUTED: theme.sidebar.backgroundColor
* `groupItems` # Group headings
* `activeBackgroundColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
* `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
* `textTransform`: 'uppercase'
* `level1Items` # Level 1 items like tags or section 1st level items
* `activeTextColor`: # COMPUTED: theme.sidebar.textColor (if set by user) or theme.colors.primary.main
* `textTransform`: 'none'
* `arrow` # menu arrow
* `arrow` # sidebar arrow
* `size`: '1.5em'
* `color`: # COMPUTED: theme.menu.textColor
* `color`: # COMPUTED: theme.sidebar.textColor
* `logo`
* `maxHeight`: # COMPUTED: menu.width
* `maxWidth`: # COMPUTED: menu.width
* `maxHeight`: # COMPUTED: sidebar.width
* `maxWidth`: # COMPUTED: sidebar.width
* `gutter`: '2px' # logo image padding
* `rightPanel`
* `backgroundColor`: '#263238'

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

@ -68,9 +68,19 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
function menuItemActiveBg(depth, { theme }: { theme: ResolvedThemeInterface }): string {
if (depth > 1) {
return darken(0.1, theme.sidebar.backgroundColor);
return theme.sidebar.level1Items.activeBackgroundColor;
} else if (depth === 1) {
return darken(0.05, theme.sidebar.backgroundColor);
return theme.sidebar.groupItems.activeBackgroundColor;
} else {
return '';
}
}
function menuItemActiveTextColor(depth, { theme }: { theme: ResolvedThemeInterface }): string {
if (depth > 1) {
return theme.sidebar.level1Items.activeTextColor;
} else if (depth === 1) {
return theme.sidebar.groupItems.activeTextColor;
} else {
return '';
}
@ -108,7 +118,7 @@ export const menuItemDepth = {
font-size: 0.929em;
text-transform: ${({ theme }) => theme.sidebar.level1Items.textTransform};
&:hover {
color: ${props => props.theme.sidebar.activeTextColor};
color: ${props => props.theme.sidebar.level1Items.activeTextColor};
}
`,
2: css`
@ -145,6 +155,7 @@ export const MenuItemLabel = styled.label.attrs((props: MenuItemLabelType) => ({
${props => (props.deprecated && deprecatedCss) || ''};
&:hover {
color: ${props => menuItemActiveTextColor(props.depth, props)};
background-color: ${props => menuItemActiveBg(props.depth, props)};
}

10
src/theme.ts
View File

@ -139,9 +139,13 @@ const defaultTheme: ThemeInterface = {
? theme.sidebar.textColor
: theme.colors.primary.main,
groupItems: {
textTransform: 'uppercase',
activeBackgroundColor: theme => darken(0.1, theme.sidebar.backgroundColor),
activeTextColor: theme => theme.sidebar.activeTextColor,
textTransform: 'uppercase'
},
level1Items: {
activeBackgroundColor: theme => darken(0.05, theme.sidebar.backgroundColor),
activeTextColor: theme => theme.sidebar.activeTextColor,
textTransform: 'none',
},
arrow: {
@ -315,9 +319,13 @@ export interface ResolvedThemeInterface {
textColor: string;
activeTextColor: string;
groupItems: {
activeBackgroundColor: string;
activeTextColor: string;
textTransform: string;
};
level1Items: {
activeBackgroundColor: string;
activeTextColor: string;
textTransform: string;
};
arrow: {