@platform/ui.datagrid/lib/styles/global.cell.mjs

Isolated tabular DataGrid.

import { color, constants, style } from '../common';
export const CLASS = constants.CSS.CLASS;
const { CELL, GRID } = CLASS;
const STYLES = {
    CELL: {
        [`.${CELL.BASE}`]: {
            all: 'unset',
            whiteSpace: 'normal',
            boxSizing: 'border-box',
            pointerEvents: 'none',
            fontSize: 14,
            color: color.format(-0.7),
        },
        [`.${CELL.BASE}.${GRID.FIRST.ROW}`]: {},
        [`.${CELL.DEFAULT}`]: {
            paddingLeft: 4,
            paddingRight: 4,
            position: 'absolute',
            left: 0,
            top: 0,
            right: 0,
            bottom: 0,
        },
        [`.${CELL.BOLD}`]: { fontWeight: 'bolder' },
        [`.${CELL.ITALIC}`]: { fontStyle: 'italic' },
        [`.${CELL.UNDERLINE}`]: { textDecoration: 'underline' },
        [`.${CELL.FORMULA}`]: {
            color: '#7ED321',
            fontFamily: constants.MONOSPACE.FAMILY,
            fontWeight: 'bolder',
        },
        [`.${CELL.ERROR}`]: {
            color: '#E30000',
        },
    },
    MARKDOWN: {
        '*': {
            paddingInlineStart: 0,
            marginBlockStart: 0,
            marginBlockEnd: 0,
            whiteSpace: 'normal',
        },
        'h1, h2': {
            borderBottom: 'none',
            paddingBottom: 0,
        },
        h1: { fontSize: '1.4em', margin: 0, marginBottom: '0.1em', marginTop: '0.1em' },
        h2: { fontSize: '1.2em', margin: 0, marginBottom: '0.1em', marginTop: '0.1em' },
        h3: { fontSize: '1em', margin: 0 },
        h4: { fontSize: '1em', margin: 0 },
        hr: {
            marginTop: '0.1em',
            marginBottom: '0.1em',
            borderBottomWidth: `3px`,
        },
        p: { paddingTop: 1 },
        pre: {
            marginTop: '1em',
            marginBottom: '1em',
            lineHeight: '1.2em',
        },
        'blockquote:last-child, pre:last-child': {
            marginBottom: 4,
        },
    },
};
style.global(STYLES.CELL);
style.global(STYLES.MARKDOWN, { prefix: `.${CELL.MARKDOWN}` });