@codedoc/core
Version:
Create beautiful modern documentation websites.
51 lines • 1.83 kB
JavaScript
import { themedStyle } from '@connectv/jss-theme';
import { Icon } from '../misc';
export const HeadingStyle = /*#__PURE__*/ themedStyle(theme => ({
heading: {
cursor: 'pointer',
position: 'relative',
},
anchor: {
position: 'absolute',
left: '-32px',
paddingRight: '8px',
top: 0, bottom: 0,
display: 'flex',
alignItems: 'center',
opacity: 0,
transform: 'translateX(-8px)',
transition: 'opacity .1s, transform .1s',
'$heading:hover &': {
opacity: .5,
transform: 'none',
'&:hover': {
opacity: 1,
},
},
'@media screen and (max-width: 1200px)': {
display: 'none',
},
}
}));
export function Heading(options, renderer, content) {
const classes = this.theme.classes(HeadingStyle);
let h$;
if (options.depth === 1)
h$ = renderer.create("h1", { id: options.slug, class: classes.heading });
else if (options.depth === 2)
h$ = renderer.create("h2", { id: options.slug, class: classes.heading });
else if (options.depth === 3)
h$ = renderer.create("h3", { id: options.slug, class: classes.heading });
else if (options.depth === 4)
h$ = renderer.create("h4", { id: options.slug, class: classes.heading });
else if (options.depth === 5)
h$ = renderer.create("h5", { id: options.slug, class: classes.heading });
else
h$ = renderer.create("h6", { id: options.slug, class: classes.heading });
renderer.render(renderer.create("fragment", null,
renderer.create("span", { class: classes.anchor, "data-ignore-text": true },
renderer.create(Icon, null, "link")),
content)).on(h$);
return h$;
}
//# sourceMappingURL=index.js.map