UNPKG

@codedoc/core

Version:

Create beautiful modern documentation websites.

55 lines 2 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.Heading = exports.HeadingStyle = void 0; var jss_theme_1 = require("@connectv/jss-theme"); var misc_1 = require("../misc"); exports.HeadingStyle = jss_theme_1.themedStyle(function (theme) { return ({ 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', }, } }); }); function Heading(options, renderer, content) { var classes = this.theme.classes(exports.HeadingStyle); var 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(misc_1.Icon, null, "link")), content)).on(h$); return h$; } exports.Heading = Heading; //# sourceMappingURL=index.js.map