105 lines
1.6 KiB
TypeScript
105 lines
1.6 KiB
TypeScript
import styled from 'styles'
|
|
|
|
export default function CodeDocs({
|
|
isHidden,
|
|
}: {
|
|
isHidden: boolean
|
|
}): JSX.Element {
|
|
return (
|
|
<StyledDocs isHidden={isHidden}>
|
|
<h2>Docs</h2>
|
|
</StyledDocs>
|
|
)
|
|
}
|
|
|
|
const StyledDocs = styled('div', {
|
|
position: 'absolute',
|
|
backgroundColor: '$panel',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
padding: 16,
|
|
font: '$docs',
|
|
overflowY: 'scroll',
|
|
userSelect: 'none',
|
|
paddingBottom: 64,
|
|
|
|
variants: {
|
|
isHidden: {
|
|
true: {
|
|
visibility: 'hidden',
|
|
},
|
|
false: {
|
|
visibility: 'visible',
|
|
},
|
|
},
|
|
},
|
|
|
|
'& ol': {},
|
|
|
|
'& li': {
|
|
marginTop: 8,
|
|
marginBottom: 4,
|
|
},
|
|
|
|
'& code': {
|
|
font: '$mono',
|
|
},
|
|
|
|
'& hr': {
|
|
margin: '32px 0',
|
|
borderColor: '$muted',
|
|
},
|
|
|
|
'& h2': {
|
|
margin: '24px 0px',
|
|
},
|
|
|
|
'& h3': {
|
|
fontSize: 20,
|
|
margin: '48px 0px 32px 0px',
|
|
},
|
|
|
|
'& h3 > code': {
|
|
fontWeight: 600,
|
|
font: '$monoheading',
|
|
},
|
|
|
|
'& h4': {
|
|
margin: '32px 0px 0px 0px',
|
|
},
|
|
|
|
'& h4 > code': {
|
|
font: '$monoheading',
|
|
fontSize: 16,
|
|
userSelect: 'all',
|
|
},
|
|
|
|
'& h4 > code > i': {
|
|
fontSize: 14,
|
|
color: '$muted',
|
|
},
|
|
|
|
'& pre': {
|
|
backgroundColor: '$bounds_bg',
|
|
padding: 16,
|
|
borderRadius: 4,
|
|
userSelect: 'all',
|
|
margin: '24px 0',
|
|
},
|
|
|
|
'& p > code, blockquote > code': {
|
|
backgroundColor: '$bounds_bg',
|
|
padding: '2px 4px',
|
|
borderRadius: 2,
|
|
color: '$code',
|
|
},
|
|
|
|
'& blockquote': {
|
|
backgroundColor: 'rgba(144, 144, 144, .05)',
|
|
padding: 12,
|
|
margin: '20px 0',
|
|
borderRadius: 8,
|
|
},
|
|
})
|