GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 08:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Remove specificity so code styling is applied to pre again

Browse Source 
Temporary style for inline code elements
This commit is contained in:
domyen 2019-08-15 21:06:59 -04:00
parent a15e516a07
commit ab3afc89b9
1 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
lib/components/src/typography/DocumentFormatting.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import memoize from 'memoizerific';
import { styled, css, CSSObject, Theme } from '@storybook/theming';
import { styled, css, CSSObject, Theme, background } from '@storybook/theming';
import { withReset } from './withReset';
const headerCommon: CSSObject = {
@ -84,15 +84,9 @@ export const Pre = styled.pre<{}>(withReset, withMargin, ({ theme }) => ({
},
},
'& code': {
fontSize: theme.typography.size.s2 - 1,
margin: 0,
padding: 0,
whiteSpace: 'pre',
border: 'none',
background: 'transparent',
},
'& code, & tt': {
backgroundColor: 'transparent',
border: 'none',
},
}));
@ -319,6 +313,16 @@ export const OL = styled.ol<{}>(withReset, withMargin, listCommon);
export const P = styled.p<{}>(withReset, withMargin, ({ theme }) => ({
fontSize: theme.typography.size.s2,
lineHeight: '24px',
'& code': {
// How do I get codeCommon here?
margin: '0 2px',
padding: '0 5px',
whiteSpace: 'nowrap',
border: `1px solid ${theme.color.mediumlight}`,
backgroundColor: theme.color.lighter,
borderRadius: '3px',
fontSize: theme.typography.size.s2 - 1,
},
}));
const codeCommon = ({ theme }: { theme: Theme }): CSSObject => ({