braid-design-system/dist/lib/components/Table/Table.css.cjs

Themeable design system for the SEEK Group

"use strict";
const fileScope = require("@vanilla-extract/css/fileScope");
const css = require("@vanilla-extract/css");
const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
fileScope.setFileScope("src/lib/components/Table/Table.css.ts", "braid-design-system");
const borderColor = css.createVar("borderColor");
const sectionBorder = `${lib_themes_vars_css_cjs.vars.borderWidth.standard} solid ${borderColor}`;
const innerBorder = `1px solid ${borderColor}`;
const table = css.style([{
  borderCollapse: "separate",
  border: sectionBorder,
  fontVariantNumeric: "tabular-nums",
  wordBreak: "break-word"
}, lib_css_colorModeStyle_cjs.colorModeStyle({
  lightMode: {
    vars: {
      [borderColor]: lib_themes_vars_css_cjs.vars.borderColor.neutralLight
    }
  },
  darkMode: {
    vars: {
      [borderColor]: lib_themes_vars_css_cjs.vars.borderColor.neutral
    }
  }
})], "table");
const tableHeader = css.style({}, "tableHeader");
const tableSection = css.style({}, "tableSection");
const row = css.style({}, "row");
const cell = css.style({}, "cell");
const headCell = css.style({}, "headCell");
css.globalStyle(`${row}:not(:last-child) > ${cell}`, {
  borderBottom: innerBorder
});
css.globalStyle(`${tableSection}:not(${tableHeader}) > ${row} > ${headCell}:not(:first-child)`, {
  borderLeft: innerBorder
});
css.globalStyle(`${tableSection}:not(${tableHeader}) > ${row} > ${headCell}:not(:last-child)`, {
  borderRight: innerBorder
});
css.globalStyle(`${tableSection}:not(:first-child) > ${row}:first-child > ${cell}`, {
  borderTop: sectionBorder
});
const alignY = css.styleVariants({
  center: {
    verticalAlign: "middle"
  },
  top: {
    verticalAlign: "top"
  }
}, "alignY");
const nowrap = css.style({
  whiteSpace: "nowrap"
}, "nowrap");
const softWidthVar = css.createVar("softWidthVar");
const softWidth = css.style({
  width: softWidthVar
}, "softWidth");
const minWidthVar = css.createVar("minWidthVar");
const minWidth = css.style({
  minWidth: minWidthVar
}, "minWidth");
const maxWidthVar = css.createVar("maxWidthVar");
const maxWidth = css.style({
  maxWidth: maxWidthVar
}, "maxWidth");
const showOnTablet = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
  tablet: {
    display: "table-cell"
  }
}), "showOnTablet");
const showOnDesktop = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
  desktop: {
    display: "table-cell"
  }
}), "showOnDesktop");
const showOnWide = css.style(lib_css_responsiveStyle_cjs.responsiveStyle({
  wide: {
    display: "table-cell"
  }
}), "showOnWide");
fileScope.endFileScope();
exports.alignY = alignY;
exports.cell = cell;
exports.headCell = headCell;
exports.maxWidth = maxWidth;
exports.maxWidthVar = maxWidthVar;
exports.minWidth = minWidth;
exports.minWidthVar = minWidthVar;
exports.nowrap = nowrap;
exports.row = row;
exports.showOnDesktop = showOnDesktop;
exports.showOnTablet = showOnTablet;
exports.showOnWide = showOnWide;
exports.softWidth = softWidth;
exports.softWidthVar = softWidthVar;
exports.table = table;
exports.tableHeader = tableHeader;
exports.tableSection = tableSection;