fix: make padding for md code blocks and code samples consistent

Redocly · Jan 23, 2019 · 007752d · 007752d
1 parent 801fea0
commit 007752d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/common-elements/tabs.ts b/src/common-elements/tabs.ts
@@ -60,9 +60,13 @@ export const Tabs = styled(ReactTabs)`
  background: ${({ theme }) => theme.codeSample.backgroundColor};
  & > div,
  & > pre {
- padding: 20px;
+ padding: ${props => props.theme.spacing.unit * 4}px;
  margin: 0;
  }
+
+ & > div > pre {
+ padding: 0;
+ }
  }
 `;
 
@@ -93,8 +97,7 @@ export const SmallTabs = styled(Tabs)`
  > .react-tabs__tab-panel {
  & > div,
  & > pre {
- padding: 10px 0;
- margin: 0;
+ padding: ${props => props.theme.spacing.unit * 2} 0;
  }
  }
 `;
diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
@@ -82,7 +82,7 @@ export const StyledMarkdownBlock = styled(PrismDiv as StyledComponent<
  white-space:${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
  background-color: #263238;
  color: white;
- padding: 12px 14px 15px 14px;
+ padding: ${props => props.theme.spacing.unit * 4}px;
  overflow-x: auto;
  line-height: normal;
  border-radius: 0px