diff --git a/src/common-elements/panels.ts b/src/common-elements/panels.ts index 5757e1f6..629750a8 100644 --- a/src/common-elements/panels.ts +++ b/src/common-elements/panels.ts @@ -3,7 +3,7 @@ import styled, { media, withProps } from '../styled-components'; export const MiddlePanel = styled.div` width: calc(100% - ${props => props.theme.rightPanel.width}); - padding: 0 ${props => props.theme.spacing.unit * 8}px; + padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; ${media.lessThan('medium')` width: 100%; @@ -15,7 +15,7 @@ export const Section = withProps<{ underlined?: boolean }>( [SECTION_ATTR]: props => props.id, } as any), )` - padding: ${props => props.theme.spacing.unit * 8}px 0; + padding: ${props => props.theme.spacing.sectionVertical}px 0; ${props => (props.underlined && @@ -38,7 +38,7 @@ export const RightPanel = styled.div` width: ${props => props.theme.rightPanel.width}; color: #fafbfc; background-color: ${props => props.theme.rightPanel.backgroundColor}; - padding: 0 ${props => props.theme.spacing.unit * 8}px; + padding: 0 ${props => props.theme.spacing.sectionHorizontal}px; ${media.lessThan('medium')` width: 100%; diff --git a/src/components/Redoc/styled.elements.tsx b/src/components/Redoc/styled.elements.tsx index 87f3f376..6bf55e1a 100644 --- a/src/components/Redoc/styled.elements.tsx +++ b/src/components/Redoc/styled.elements.tsx @@ -22,10 +22,6 @@ export const RedocWrap = styled.div` box-sizing: border-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); } - - .redoc-markdown h1 { - padding-top: ${theme.spacing.unit * 16}px; - } `}; `; diff --git a/src/theme.ts b/src/theme.ts index 0fa0a2cf..3fa864f8 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -3,6 +3,8 @@ import { darken, desaturate, lighten, readableColor, transparentize } from 'poli const defaultTheme: ThemeInterface = { spacing: { unit: 5, + sectionHorizontal: ({ spacing }) => spacing.unit * 8, + sectionVertical: ({ spacing }) => spacing.unit * 8, }, breakpoints: { small: '50rem', @@ -202,6 +204,8 @@ export interface FontSettings { export interface ResolvedThemeInterface { spacing: { unit: number; + sectionHorizontal: number; + sectionVertical: number; }; breakpoints: { small: string;