mirror of
https://github.com/Redocly/redoc.git
synced 2025-08-09 06:34:53 +03:00
update style
This commit is contained in:
parent
5270737a98
commit
8df116284f
|
@ -12,6 +12,7 @@ export const PropertiesTableCaption = styled.caption`
|
||||||
|
|
||||||
export const PropertyCell = styled.td<{ kind?: string }>`
|
export const PropertyCell = styled.td<{ kind?: string }>`
|
||||||
border-left: 1px solid ${props => props.theme.schema.linesColor};
|
border-left: 1px solid ${props => props.theme.schema.linesColor};
|
||||||
|
border-bottom: 1px solid #e3e8ee;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 10px 10px 10px 0;
|
padding: 10px 10px 10px 0;
|
||||||
|
@ -52,6 +53,10 @@ export const PropertyCell = styled.td<{ kind?: string }>`
|
||||||
background: none;
|
background: none;
|
||||||
border-left-color: transparent;
|
border-left-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
tr.expanded & {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const PropertyCellWithInner = styled(PropertyCell)`
|
export const PropertyCellWithInner = styled(PropertyCell)`
|
||||||
|
@ -75,7 +80,7 @@ export const PropertyNameCell = styled(PropertyCell)`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const PropertyDetailsCell = styled.td`
|
export const PropertyDetailsCell = styled.td`
|
||||||
border-bottom: 1px solid #9fb4be;
|
border-bottom: 1px solid #e3e8ee;
|
||||||
padding: 10px 0;
|
padding: 10px 0;
|
||||||
width: ${props => props.theme.schema.defaultDetailsWidth};
|
width: ${props => props.theme.schema.defaultDetailsWidth};
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
@ -125,6 +130,7 @@ export const PropertiesTable = styled.table`
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
&
|
&
|
||||||
${InnerPropertiesWrap},
|
${InnerPropertiesWrap},
|
||||||
&
|
&
|
||||||
|
@ -140,6 +146,10 @@ export const PropertiesTable = styled.table`
|
||||||
margin: ${({ theme }) => theme.schema.nestingSpacing};
|
margin: ${({ theme }) => theme.schema.nestingSpacing};
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
background: ${({ theme }) => theme.schema.nestedBackground};
|
background: ${({ theme }) => theme.schema.nestedBackground};
|
||||||
|
td {
|
||||||
|
border-top: 1px solid #e3e8ee;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&
|
&
|
||||||
|
|
|
@ -16,7 +16,7 @@ export const headerCommonMixin = level => css`
|
||||||
export const H1 = styled.h1`
|
export const H1 = styled.h1`
|
||||||
${headerCommonMixin(1)};
|
${headerCommonMixin(1)};
|
||||||
color: ${({ theme }) => theme.colors.primary.main};
|
color: ${({ theme }) => theme.colors.primary.main};
|
||||||
|
padding-top: 20px;
|
||||||
${extensionsHook('H1')};
|
${extensionsHook('H1')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -41,13 +41,14 @@ export const RightPanelHeader = styled.h3`
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const UnderlinedHeader = styled.h5`
|
export const UnderlinedHeader = styled.h5`
|
||||||
border-bottom: 1px solid rgba(38, 50, 56, 0.3);
|
border-bottom: 1px solid #e3e8ee;
|
||||||
margin: 1em 0 1em 0;
|
margin: 1em 0 1em 0;
|
||||||
color: rgba(38, 50, 56, 0.5);
|
color: rgba(38, 50, 56, 0.5);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.929em;
|
font-size: 0.929em;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
|
padding: 1em 0 1em 0;
|
||||||
|
|
||||||
${extensionsHook('UnderlinedHeader')};
|
${extensionsHook('UnderlinedHeader')};
|
||||||
`;
|
`;
|
||||||
|
|
|
@ -8,15 +8,15 @@ export const MiddlePanel = styled.div`
|
||||||
${media.lessThan('medium', true)`
|
${media.lessThan('medium', true)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: ${props =>
|
padding: ${props =>
|
||||||
`${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
|
`0 ${props.theme.spacing.sectionHorizontal}px ${props.theme.spacing.sectionVertical}px ${props.theme.spacing.sectionHorizontal}px`};
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Section = styled.div.attrs(props => ({
|
export const Section = styled.div.attrs(props => ({
|
||||||
[SECTION_ATTR]: props.id,
|
[SECTION_ATTR]: props.id,
|
||||||
})) <{ underlined?: boolean }>`
|
})) <{ underlined?: boolean }>`
|
||||||
padding: ${props => props.theme.spacing.sectionVertical}px 0;
|
padding: 0 0 ${props => props.theme.spacing.sectionVertical}px 0;
|
||||||
|
border-bottom: 1px solid #e3e8ee;
|
||||||
&:last-child {
|
&:last-child {
|
||||||
min-height: calc(100vh + 1px);
|
min-height: calc(100vh + 1px);
|
||||||
}
|
}
|
||||||
|
@ -39,7 +39,6 @@ export const Section = styled.div.attrs(props => ({
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
content: '';
|
content: '';
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
}
|
||||||
`) ||
|
`) ||
|
||||||
''}
|
''}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { SecurityRequirements } from '../SecurityRequirement/SecurityRequirement';
|
|
||||||
|
|
||||||
import { observer } from 'mobx-react';
|
import { observer } from 'mobx-react';
|
||||||
|
|
||||||
|
@ -60,7 +59,6 @@ export class Operation extends React.Component<OperationProps> {
|
||||||
</Description>
|
</Description>
|
||||||
)}
|
)}
|
||||||
<Extensions extensions={operation.extensions} />
|
<Extensions extensions={operation.extensions} />
|
||||||
<SecurityRequirements securities={operation.security} />
|
|
||||||
<Parameters parameters={operation.parameters} body={operation.requestBody} />
|
<Parameters parameters={operation.parameters} body={operation.requestBody} />
|
||||||
<ResponsesList responses={operation.responses} />
|
<ResponsesList responses={operation.responses} />
|
||||||
</MiddlePanel>
|
</MiddlePanel>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
|
|
||||||
import { ParametersGroup } from './ParametersGroup';
|
import { ParametersGroup } from './ParametersGroup';
|
||||||
|
|
||||||
import { UnderlinedHeader } from '../../common-elements';
|
import { UnderlinedHeader } from '../../common-elements';
|
||||||
|
@ -59,10 +58,10 @@ export class Parameters extends React.PureComponent<ParametersProps> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function DropdownWithinHeader(props) {
|
function DropdownWithinHeader() {
|
||||||
return (
|
return (
|
||||||
<UnderlinedHeader key="header">
|
<UnderlinedHeader key="header">
|
||||||
Request Body schema: <DropdownOrLabel {...props} />
|
Request
|
||||||
</UnderlinedHeader>
|
</UnderlinedHeader>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -5,7 +5,6 @@ import { ThemeProvider } from '../../styled-components';
|
||||||
import { OptionsProvider } from '../OptionsProvider';
|
import { OptionsProvider } from '../OptionsProvider';
|
||||||
|
|
||||||
import { AppStore } from '../../services';
|
import { AppStore } from '../../services';
|
||||||
import { ApiInfo } from '../ApiInfo/';
|
|
||||||
import { ApiLogo } from '../ApiLogo/ApiLogo';
|
import { ApiLogo } from '../ApiLogo/ApiLogo';
|
||||||
import { ContentItems } from '../ContentItems/ContentItems';
|
import { ContentItems } from '../ContentItems/ContentItems';
|
||||||
import { SideMenu } from '../SideMenu/SideMenu';
|
import { SideMenu } from '../SideMenu/SideMenu';
|
||||||
|
@ -36,7 +35,7 @@ export class Redoc extends React.Component<RedocProps> {
|
||||||
const {
|
const {
|
||||||
store: { spec, menu, options, search, marker },
|
store: { spec, menu, options, search, marker },
|
||||||
} = this.props;
|
} = this.props;
|
||||||
const store = this.props.store;
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={options.theme}>
|
<ThemeProvider theme={options.theme}>
|
||||||
<StoreProvider value={this.props.store}>
|
<StoreProvider value={this.props.store}>
|
||||||
|
@ -56,7 +55,6 @@ export class Redoc extends React.Component<RedocProps> {
|
||||||
<SideMenu menu={menu} />
|
<SideMenu menu={menu} />
|
||||||
</StickyResponsiveSidebar>
|
</StickyResponsiveSidebar>
|
||||||
<ApiContentWrap className="api-content">
|
<ApiContentWrap className="api-content">
|
||||||
<ApiInfo store={store} />
|
|
||||||
<ContentItems items={menu.items as any} />
|
<ContentItems items={menu.items as any} />
|
||||||
</ApiContentWrap>
|
</ApiContentWrap>
|
||||||
<BackgroundStub />
|
<BackgroundStub />
|
||||||
|
|
|
@ -3,7 +3,6 @@ import * as React from 'react';
|
||||||
import { ResponseModel } from '../../services/models';
|
import { ResponseModel } from '../../services/models';
|
||||||
|
|
||||||
import { UnderlinedHeader } from '../../common-elements';
|
import { UnderlinedHeader } from '../../common-elements';
|
||||||
import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
|
|
||||||
import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
|
import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
|
||||||
import { Schema } from '../Schema';
|
import { Schema } from '../Schema';
|
||||||
|
|
||||||
|
@ -26,10 +25,10 @@ export class ResponseDetails extends React.PureComponent<{ response: ResponseMod
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
private renderDropdown = props => {
|
private renderDropdown = () => {
|
||||||
return (
|
return (
|
||||||
<UnderlinedHeader key="header">
|
<UnderlinedHeader key="header">
|
||||||
Response Schema: <DropdownOrLabel {...props} />
|
Response
|
||||||
</UnderlinedHeader>
|
</UnderlinedHeader>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
|
|
||||||
import { darken } from 'polished';
|
|
||||||
import styled from '../../styled-components';
|
import styled from '../../styled-components';
|
||||||
import { MenuItemLabel } from '../SideMenu/styled.elements';
|
import { MenuItemLabel } from '../SideMenu/styled.elements';
|
||||||
|
|
||||||
|
@ -14,12 +13,10 @@ export const SearchInput = styled.input.attrs(() => ({
|
||||||
width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
|
width: calc(100% - ${props => props.theme.spacing.unit * 8}px);
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
margin: 0 ${props => props.theme.spacing.unit * 4}px;
|
margin: 0 ${props => props.theme.spacing.unit * 4}px;
|
||||||
padding: 5px ${props => props.theme.spacing.unit * 2}px 5px
|
padding: 10px ${props => props.theme.spacing.unit * 2}px 10px
|
||||||
${props => props.theme.spacing.unit * 4}px;
|
${props => props.theme.spacing.unit * 6}px;
|
||||||
border: 0;
|
border: 1px solid #d1d5da;
|
||||||
border-bottom: 1px solid ${({ theme }) => darken(0.1, theme.menu.backgroundColor)};
|
|
||||||
font-family: ${({ theme }) => theme.typography.fontFamily};
|
font-family: ${({ theme }) => theme.typography.fontFamily};
|
||||||
font-weight: bold;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: ${props => props.theme.menu.textColor};
|
color: ${props => props.theme.menu.textColor};
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
|
@ -41,8 +38,8 @@ export const SearchIcon = styled((props: { className?: string }) => (
|
||||||
className: 'search-icon',
|
className: 'search-icon',
|
||||||
})`
|
})`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: ${props => props.theme.spacing.unit * 4}px;
|
left: ${props => props.theme.spacing.unit * 6}px;
|
||||||
height: 1.8em;
|
height: 2.4em;
|
||||||
width: 0.9em;
|
width: 0.9em;
|
||||||
|
|
||||||
path {
|
path {
|
||||||
|
|
|
@ -3,9 +3,9 @@ import * as React from 'react';
|
||||||
|
|
||||||
import { ShelfIcon } from '../../common-elements/shelfs';
|
import { ShelfIcon } from '../../common-elements/shelfs';
|
||||||
import { IMenuItem, OperationModel } from '../../services';
|
import { IMenuItem, OperationModel } from '../../services';
|
||||||
import { shortenHTTPVerb } from '../../utils/openapi';
|
|
||||||
import { MenuItems } from './MenuItems';
|
import { MenuItems } from './MenuItems';
|
||||||
import { MenuItemLabel, MenuItemLi, MenuItemTitle, OperationBadge } from './styled.elements';
|
import { MenuItemLabel, MenuItemLi, MenuItemTitle } from './styled.elements';
|
||||||
|
|
||||||
export interface MenuItemProps {
|
export interface MenuItemProps {
|
||||||
item: IMenuItem;
|
item: IMenuItem;
|
||||||
|
@ -88,7 +88,6 @@ class OperationMenuItemContent extends React.Component<OperationMenuItemContentP
|
||||||
const { item } = this.props;
|
const { item } = this.props;
|
||||||
return (
|
return (
|
||||||
<MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}>
|
<MenuItemLabel depth={item.depth} active={item.active} deprecated={item.deprecated}>
|
||||||
<OperationBadge type={item.httpVerb}>{shortenHTTPVerb(item.httpVerb)}</OperationBadge>
|
|
||||||
<MenuItemTitle width="calc(100% - 38px)">
|
<MenuItemTitle width="calc(100% - 38px)">
|
||||||
{item.name}
|
{item.name}
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
|
|
|
@ -5,7 +5,6 @@ import { IMenuItem, MenuStore } from '../../services/MenuStore';
|
||||||
import { MenuItems } from './MenuItems';
|
import { MenuItems } from './MenuItems';
|
||||||
|
|
||||||
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
|
import { PerfectScrollbarWrap } from '../../common-elements/perfect-scrollbar';
|
||||||
import { RedocAttribution } from './styled.elements';
|
|
||||||
|
|
||||||
@observer
|
@observer
|
||||||
export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
|
export class SideMenu extends React.Component<{ menu: MenuStore; className?: string }> {
|
||||||
|
@ -22,11 +21,6 @@ export class SideMenu extends React.Component<{ menu: MenuStore; className?: str
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<MenuItems items={store.items} onActivate={this.activate} root={true} />
|
<MenuItems items={store.items} onActivate={this.activate} root={true} />
|
||||||
<RedocAttribution>
|
|
||||||
<a target="_blank" href="https://github.com/Redocly/redoc">
|
|
||||||
Documentation Powered by ReDoc
|
|
||||||
</a>
|
|
||||||
</RedocAttribution>
|
|
||||||
</PerfectScrollbarWrap>
|
</PerfectScrollbarWrap>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -64,7 +64,7 @@ export const OperationBadge = styled.span.attrs((props: { type: string }) => ({
|
||||||
|
|
||||||
function menuItemActiveBg(depth, { theme }): string {
|
function menuItemActiveBg(depth, { theme }): string {
|
||||||
if (depth > 1) {
|
if (depth > 1) {
|
||||||
return darken(0.1, theme.menu.backgroundColor);
|
return '';
|
||||||
} else if (depth === 1) {
|
} else if (depth === 1) {
|
||||||
return darken(0.05, theme.menu.backgroundColor);
|
return darken(0.05, theme.menu.backgroundColor);
|
||||||
} else {
|
} else {
|
||||||
|
@ -108,7 +108,7 @@ export const menuItemDepth = {
|
||||||
}
|
}
|
||||||
`,
|
`,
|
||||||
2: css`
|
2: css`
|
||||||
color: ${props => props.theme.menu.textColor};
|
margin-left: 20px;
|
||||||
`,
|
`,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -126,9 +126,9 @@ 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 ? '#757de6' : props.theme.menu.textColor)};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 12.5px ${props => props.theme.spacing.unit * 4}px;
|
padding: 6.5px ${props => props.theme.spacing.unit * 4}px;
|
||||||
${({ depth, type, theme }) =>
|
${({ depth, type, theme }) =>
|
||||||
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
|
(type === 'section' && depth > 1 && 'padding-left: ' + theme.spacing.unit * 8 + 'px;') || ''}
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -27,7 +27,9 @@ const StyledStickySidebar = styled.div<{ open?: boolean }>`
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
border-right-width: 1px;
|
||||||
|
border-right-style: solid;
|
||||||
|
border-right-color: #e3e8ee;
|
||||||
backface-visibility: hidden;
|
backface-visibility: hidden;
|
||||||
contain: strict;
|
contain: strict;
|
||||||
|
|
||||||
|
|
28
src/theme.ts
28
src/theme.ts
|
@ -1,4 +1,4 @@
|
||||||
import { darken, desaturate, lighten, readableColor, transparentize } from 'polished';
|
import { darken, lighten, readableColor, transparentize } from 'polished';
|
||||||
|
|
||||||
const defaultTheme: ThemeInterface = {
|
const defaultTheme: ThemeInterface = {
|
||||||
spacing: {
|
spacing: {
|
||||||
|
@ -14,7 +14,7 @@ const defaultTheme: ThemeInterface = {
|
||||||
colors: {
|
colors: {
|
||||||
tonalOffset: 0.3,
|
tonalOffset: 0.3,
|
||||||
primary: {
|
primary: {
|
||||||
main: '#32329f',
|
main: '#2e4369',
|
||||||
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
|
light: ({ colors }) => lighten(colors.tonalOffset, colors.primary.main),
|
||||||
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
|
dark: ({ colors }) => darken(colors.tonalOffset, colors.primary.main),
|
||||||
contrastText: ({ colors }) => readableColor(colors.primary.main),
|
contrastText: ({ colors }) => readableColor(colors.primary.main),
|
||||||
|
@ -38,7 +38,7 @@ const defaultTheme: ThemeInterface = {
|
||||||
contrastText: ({ colors }) => readableColor(colors.error.main),
|
contrastText: ({ colors }) => readableColor(colors.error.main),
|
||||||
},
|
},
|
||||||
text: {
|
text: {
|
||||||
primary: '#333333',
|
primary: '#5d7079',
|
||||||
secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
|
secondary: ({ colors }) => lighten(colors.tonalOffset, colors.text.primary),
|
||||||
},
|
},
|
||||||
border: {
|
border: {
|
||||||
|
@ -76,26 +76,22 @@ const defaultTheme: ThemeInterface = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
schema: {
|
schema: {
|
||||||
linesColor: theme =>
|
linesColor: '#ffffff',
|
||||||
lighten(
|
|
||||||
theme.colors.tonalOffset,
|
|
||||||
desaturate(theme.colors.tonalOffset, theme.colors.primary.main),
|
|
||||||
),
|
|
||||||
defaultDetailsWidth: '75%',
|
defaultDetailsWidth: '75%',
|
||||||
typeNameColor: theme => theme.colors.text.secondary,
|
typeNameColor: theme => theme.colors.text.secondary,
|
||||||
typeTitleColor: theme => theme.schema.typeNameColor,
|
typeTitleColor: theme => theme.schema.typeNameColor,
|
||||||
requireLabelColor: theme => theme.colors.error.main,
|
requireLabelColor: theme => theme.colors.error.main,
|
||||||
labelsTextSize: '0.9em',
|
labelsTextSize: '0.9em',
|
||||||
nestingSpacing: '1em',
|
nestingSpacing: '1em',
|
||||||
nestedBackground: '#fafafa',
|
nestedBackground: '#ffffff',
|
||||||
arrow: {
|
arrow: {
|
||||||
size: '1.1em',
|
size: '1.1em',
|
||||||
color: theme => theme.colors.text.secondary,
|
color: theme => theme.colors.text.secondary,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
typography: {
|
typography: {
|
||||||
fontSize: '14px',
|
fontSize: '16px',
|
||||||
lineHeight: '1.5em',
|
lineHeight: '1.6em',
|
||||||
fontWeightRegular: '400',
|
fontWeightRegular: '400',
|
||||||
fontWeightBold: '600',
|
fontWeightBold: '600',
|
||||||
fontWeightLight: '300',
|
fontWeightLight: '300',
|
||||||
|
@ -117,14 +113,14 @@ const defaultTheme: ThemeInterface = {
|
||||||
wrap: false,
|
wrap: false,
|
||||||
},
|
},
|
||||||
links: {
|
links: {
|
||||||
color: ({ colors }) => colors.primary.main,
|
color: '#757de6',
|
||||||
visited: ({ typography }) => typography.links.color,
|
visited: ({ typography }) => typography.links.color,
|
||||||
hover: ({ typography }) => lighten(0.2, typography.links.color),
|
hover: ({ typography }) => darken(0.5, typography.links.color),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
width: '260px',
|
width: '260px',
|
||||||
backgroundColor: '#fafafa',
|
backgroundColor: '#ffffff',
|
||||||
textColor: '#333333',
|
textColor: '#333333',
|
||||||
groupItems: {
|
groupItems: {
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
|
@ -134,7 +130,7 @@ const defaultTheme: ThemeInterface = {
|
||||||
},
|
},
|
||||||
arrow: {
|
arrow: {
|
||||||
size: '1.5em',
|
size: '1.5em',
|
||||||
color: theme => theme.menu.textColor,
|
color: '#e3e8ee',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
logo: {
|
logo: {
|
||||||
|
@ -143,7 +139,7 @@ const defaultTheme: ThemeInterface = {
|
||||||
gutter: '2px',
|
gutter: '2px',
|
||||||
},
|
},
|
||||||
rightPanel: {
|
rightPanel: {
|
||||||
backgroundColor: '#263238',
|
backgroundColor: '#ffffff',
|
||||||
width: '40%',
|
width: '40%',
|
||||||
textColor: '#ffffff',
|
textColor: '#ffffff',
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue
Block a user