@octopusdeploy/design-system-components/dist/src/components/LegacyDataTable/LegacyDataTableStyles.js

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.dataTableRowColumn = exports.dataTableRowHeaderColumnInSidebar = exports.dataTableRowHeaderColumn = exports.dataTableRow = exports.dataTableToolsRow = exports.dataTableFooterColumn = exports.dataTableHeaderColumn = exports.dataTableHeader = exports.dataTable = exports.SmallScreen = void 0;
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
exports.SmallScreen = "600px";
exports.dataTable = (0, css_1.css)({
    borderCollapse: "collapse",
    width: "100%",
    font: design_system_tokens_1.text.body.regular.medium,
    [`@media (max-width: ${exports.SmallScreen})`]: {
        border: "none",
        display: "block",
    },
});
exports.dataTableHeader = (0, css_1.css)({
    [`@media (max-width: ${exports.SmallScreen})`]: {
        display: "block",
    },
});
exports.dataTableHeaderColumn = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.secondary,
    padding: "1rem 1.125rem",
    font: design_system_tokens_1.text.body.regular.medium,
    boxSizing: "border-box",
    textAlign: "left",
    [`@media (max-width: ${exports.SmallScreen})`]: {
        display: "block",
    },
});
exports.dataTableFooterColumn = (0, css_1.css)({
    color: design_system_tokens_1.themeTokens.color.text.secondary,
    padding: 0,
    font: design_system_tokens_1.text.body.regular.medium,
    paddingBottom: "1rem",
    textAlign: "left",
    boxSizing: "border-box",
    [`@media (max-width: ${exports.SmallScreen})`]: {
        display: "block",
    },
});
//Intentionally left blank to generate className which is used to
//control the tools row behaviour at small screen sizes.
exports.dataTableToolsRow = (0, css_1.css)({});
exports.dataTableRow = (0, css_1.css)({
    [`thead &`]: {
        border: "none",
        ":hover, :focus": {
            backgroundColor: "transparent",
        },
    },
    borderTop: `0.0625rem solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
    ":last-child": {
        borderBottom: `0.0625rem solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
    },
    [`@media (max-width: ${exports.SmallScreen})`]: {
        display: "block",
        [`thead &:not(.${exports.dataTableToolsRow})`]: {
            position: "absolute",
            top: "-9999px",
            left: "-9999px",
        },
    },
});
exports.dataTableRowHeaderColumn = (0, css_1.css)({
    verticalAlign: "top",
    paddingTop: "0.875rem",
    textAlign: "right",
    width: "16rem",
    [`@media (max-width: ${exports.SmallScreen})`]: {
        padding: "0.75rem 1.125rem",
        textAlign: "left",
        width: "unset",
    },
});
exports.dataTableRowHeaderColumnInSidebar = (0, css_1.css)({
    width: "8rem !important",
    [`@media (max-width: ${exports.SmallScreen})`]: {
        width: "unset",
    },
});
exports.dataTableRowColumn = (0, css_1.css)({
    boxSizing: "border-box",
    color: design_system_tokens_1.themeTokens.color.text.primary,
    verticalAlign: "top",
    padding: "0.75rem 1.125rem",
    "&:first-child": {
        font: design_system_tokens_1.text.body.bold.medium,
    },
    a: {
        textAlign: "left",
        color: design_system_tokens_1.themeTokens.color.text.link.default,
    },
    [`@media (max-width: ${exports.SmallScreen})`]: {
        display: "block",
        border: "none",
        position: "relative",
        lineHeight: "1.5rem",
        paddingTop: "0.5rem",
        paddingBottom: 0,
        maxWidth: "100%",
        width: "100%",
        "&:not(:first-child)": {
            paddingTop: 0,
        },
    },
});