clickable-json/lib/css.js

Interactive JSON and JSON CRDT viewer and editor

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.bottomRightActionPos = exports.tooltip = exports.insArrButton = exports.insArrLine = exports.insArrDot = exports.insArrBlock = exports.bracketHovered = exports.collapsed = exports.collapser = exports.bracket = exports.lineInner = exports.line = exports.list = exports.colon = exports.inputActive = exports.input = exports.property = exports.quote = exports.ValueColor = exports.object = exports.block = exports.negative = exports.blue = void 0;
const nano_theme_1 = require("nano-theme");
exports.blue = nano_theme_1.theme.color.sem.blue[0];
exports.negative = nano_theme_1.theme.color.sem.negative[0];
exports.block = (0, nano_theme_1.rule)({
    d: 'inline-block',
    ff: 'monospace',
    col: nano_theme_1.theme.g(0.1),
});
exports.object = (0, nano_theme_1.rule)({
    pos: 'relative',
    d: 'inline-block',
});
exports.ValueColor = {
    nil: [nano_theme_1.theme.g(0, 0.4), nano_theme_1.darkTheme.g(0, 0.4)],
    undef: [nano_theme_1.theme.g(0, 0.2), nano_theme_1.darkTheme.g(0, 0.2)],
    str: ['#e00e44', '#f01e54'],
    bool: ['#411888', '#9168c8'],
    num: ['#0a8F3F', '#0FaF4F'],
    zero: ['#748A00', '#94AA11'],
    float: ['#016873', '#51a8b3'],
};
exports.quote = (0, nano_theme_1.rule)({
    col: '#E84D3D',
});
exports.property = (0, nano_theme_1.rule)({
    pad: '0',
    fw: 'bold',
    bxz: 'border-box',
    va: 'top',
});
const activeInput = {
    col: nano_theme_1.theme.g(0),
    pd: '5px',
    bg: nano_theme_1.theme.bg,
    bd: `1px solid ${nano_theme_1.theme.g(0.7)}`,
    mr: '-6px',
    out: 0,
};
exports.input = (0, nano_theme_1.rule)({
    z: 2,
    pos: 'relative',
    bd: 0,
    mar: 0,
    pad: 0,
    bg: 'transparent',
    bdrad: '5px',
    d: 'inline-block',
    minW: 'auto',
    w: 'auto',
    // '&:focus': activeInput,
    '&::selection': {
        col: '#fff',
        bgc: exports.blue,
    },
    input: {
        out: 0,
    },
});
exports.inputActive = (0, nano_theme_1.rule)(activeInput);
exports.colon = (0, nano_theme_1.rule)({
    pd: '0 8px 0 0px',
    cur: 'default',
    va: 'top',
    '&>span': {
        pd: '0 2px',
    },
    '&:hover': {
        '&>span': {
            out: `1px dotted ${exports.blue}`,
        },
    },
});
exports.list = (0, nano_theme_1.rule)({
    d: 'block',
    listStyleType: 'none',
    pd: 0,
    mr: '0 0 0 32px',
});
exports.line = (0, nano_theme_1.rule)({
    d: 'block',
    ls: 'none',
    pd: 0,
    mr: 0,
});
exports.lineInner = (0, nano_theme_1.rule)({
    d: 'inline-block',
});
exports.bracket = (0, nano_theme_1.rule)({
    pos: 'relative',
    cur: 'default',
});
exports.collapser = (0, nano_theme_1.rule)({
    pd: '0 6px',
    pos: 'absolute',
    t: '0px',
    l: '-24px',
    cur: 'default',
    us: 'none',
});
exports.collapsed = (0, nano_theme_1.rule)({
    col: exports.blue,
    cur: 'default',
    fw: 'bold',
    bg: nano_theme_1.theme.blue(0.1),
    pd: '2px',
    mr: '-2px',
    bdrad: '4px',
});
exports.bracketHovered = (0, nano_theme_1.rule)({
    out: `1px dotted ${exports.blue}`,
});
exports.insArrBlock = (0, nano_theme_1.rule)({
    pos: 'relative',
    h: '0px',
    w: '0px',
});
exports.insArrDot = (0, nano_theme_1.rule)({
    pos: 'absolute',
    t: '0px',
    l: '-4px',
    w: '3px',
    h: '3px',
    bdrad: '50%',
    bg: exports.blue,
    pe: 'none',
    [`.${exports.insArrBlock.trim()}:hover &`]: {
        top: '-2px',
        left: '2px',
        w: '7px',
        h: '7px',
    },
});
exports.insArrLine = (0, nano_theme_1.rule)({
    pos: 'absolute',
    t: '1px',
    l: '-56px',
    w: '50px',
    h: '0px',
    bdt: `1px dotted ${exports.blue}`,
    pe: 'none',
    [`.${exports.insArrBlock.trim()}:hover &`]: {
        l: '-56px',
        w: '56px',
        bdt: `1px solid ${exports.blue}`,
    },
});
exports.insArrButton = (0, nano_theme_1.rule)({
    pos: 'absolute',
    d: 'block',
    t: '-8px',
    l: '-75px',
});
exports.tooltip = (0, nano_theme_1.rule)(Object.assign(Object.assign({}, nano_theme_1.theme.font.ui1), { pos: 'absolute', d: 'none', t: '-2.5em', l: '0px', bg: 'rgba(0,0,0,.8)', col: '#fff', fz: 12 / 13.4 + 'em', pad: '.4em .8em', bdrad: '.4em', z: 3, pe: 'none', us: 'none', ws: 'nowrap' }));
exports.bottomRightActionPos = (0, nano_theme_1.rule)({
    d: 'inline-block',
    pos: 'absolute',
    r: '-6px',
    b: '-9px',
    z: 2,
});
//# sourceMappingURL=css.js.map