@octopusdeploy/design-system-components/dist/src/components/DataTable/styles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.tableMobileStyles = exports.tableStyles = exports.tableBorder = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
exports.tableBorder = `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.primary}`;
exports.tableStyles = (0, css_1.css)({
    width: "100%",
    backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
    borderSpacing: 0,
    th: {
        padding: design_system_tokens_1.space[16],
        textAlign: "left",
        font: design_system_tokens_1.text.body.regular.medium,
        position: "relative",
        ":not(:first-child)": {
            ":before": {
                content: "''",
                position: "absolute",
                height: "50%",
                left: 0,
                top: "25%",
                borderLeft: exports.tableBorder,
            },
        },
    },
    td: {
        borderTop: exports.tableBorder,
        font: design_system_tokens_1.text.body.regular.medium,
        padding: design_system_tokens_1.space[16],
        verticalAlign: "middle",
    },
});
exports.tableMobileStyles = (0, css_1.css)({
    display: "block",
    overflowX: "auto",
});