@cbpds/web-components/dist/collection/components/cbp-table/cbp-table.css

Web components for the CBP Design System.

/* 
 * Caution: "global styles" get injected into every component and can cause file size bloat.
 * These should only include SASS variables and mixins that are not written out to CSS directly
 */
/**
*  @prop --cbp-table-color: var(--cbp-color-text-darkest);
*  @prop --cbp-table-color-dark: var(--cbp-color-text-lightest);

*  @prop --cbp-table-header-color: var(--cbp-color-interactive-secondary-darker);
*  @prop --cbp-table-header-color-dark: var(--cbp-color-interactive-secondary-lighter);
*  @prop --cbp-table-header-color-hover: var(--cbp-color-interactive-secondary-lighter);
*  @prop --cbp-table-header-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
*  @prop --cbp-table-header-color-focus: var(--cbp-color-text-lightest);
*  @prop --cbp-table-header-color-focus-dark: var(--cbp-color-text-darkest);
*  @prop --cbp-table-header-color-active: var(--cbp-color-text-darkest);
*  @prop --cbp-table-header-color-active-dark: var(--cbp-color-text-darkest);

*  @prop --cbp-table-header-color-bg: var(--cbp-color-gray-cool-20);
*  @prop --cbp-table-header-color-bg-dark: var(--cbp-color-gray-cool-60);
*  @prop --cbp-table-header-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
*  @prop --cbp-table-header-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
*  @prop --cbp-table-header-color-bg-focus: var(--cbp-color-interactive-focus-dark);
*  @prop --cbp-table-header-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
*  @prop --cbp-table-header-color-bg-active: var(--cbp-color-interactive-active-dark);
*  @prop --cbp-table-header-color-bg-active-dark: var(--cbp-color-interactive-active-light);

*  @prop --cbp-table-header-color-outline: var(--cbp-color-white);
*  @prop --cbp-table-header-color-outline-dark: var(--cbp-color-black);

*  @prop --cbp-table-row-color-bg: var(--cbp-color-white);
*  @prop --cbp-table-row-color-bg-dark: var(--cbp-color-gray-cool-70);
*  @prop --cbp-table-row-color-bg-striped: var(--cbp-color-gray-cool-4);
*  @prop --cbp-table-row-color-bg-striped-dark: var(--cbp-color-gray-cool-80);
*  @prop --cbp-table-row-color-bg-hover: var(--cbp-color-gray-cool-10);
*  @prop --cbp-table-row-color-bg-hover-dark: var(--cbp-color-gray-cool-90);
*  @prop --cbp-table-row-color-bg-selected: var(--cbp-color-interactive-selected-light);
*  @prop --cbp-table-row-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);

*  @prop --cbp-table-row-color-border: var(--cbp-color-gray-cool-30);
*  @prop --cbp-table-row-color-border-dark: var(--cbp-color-gray-cool-50);
*  @prop --cbp-table-row-border-size: var(--cbp-border-size-md); 

*  @prop --cbp-table-cell-padding: var(--cbp-space-3x) var(--cbp-space-4x);
*/
:root {
  --cbp-table-color: var(--cbp-color-text-darkest);
  --cbp-table-color-dark: var(--cbp-color-text-lightest);
  --cbp-table-header-color: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-hover: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-hover-dark: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-focus: var(--cbp-color-text-lightest);
  --cbp-table-header-color-focus-dark: var(--cbp-color-text-darkest);
  --cbp-table-header-color-active: var(--cbp-color-text-darkest);
  --cbp-table-header-color-active-dark: var(--cbp-color-text-darkest);
  --cbp-table-header-color-bg: var(--cbp-color-gray-cool-20);
  --cbp-table-header-color-bg-dark: var(--cbp-color-gray-cool-60);
  --cbp-table-header-color-bg-hover: var(--cbp-color-interactive-secondary-darker);
  --cbp-table-header-color-bg-hover-dark: var(--cbp-color-interactive-secondary-lighter);
  --cbp-table-header-color-bg-focus: var(--cbp-color-interactive-focus-dark);
  --cbp-table-header-color-bg-focus-dark: var(--cbp-color-interactive-focus-light);
  --cbp-table-header-color-bg-active: var(--cbp-color-interactive-active-dark);
  --cbp-table-header-color-bg-active-dark: var(--cbp-color-interactive-active-light);
  --cbp-table-header-color-outline: var(--cbp-color-white);
  --cbp-table-header-color-outline-dark: var(--cbp-color-black);
  --cbp-table-row-color-bg: var(--cbp-color-white);
  --cbp-table-row-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-table-row-color-bg-striped: var(--cbp-color-gray-cool-4);
  --cbp-table-row-color-bg-striped-dark: var(--cbp-color-gray-cool-80);
  --cbp-table-row-color-bg-hover: var(--cbp-color-gray-cool-10);
  --cbp-table-row-color-bg-hover-dark: var(--cbp-color-gray-cool-90);
  --cbp-table-row-color-bg-selected: var(--cbp-color-interactive-selected-light);
  --cbp-table-row-color-bg-selected-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-table-row-color-border: var(--cbp-color-gray-cool-30);
  --cbp-table-row-color-border-dark: var(--cbp-color-gray-cool-50);
  --cbp-table-row-border-size: var(--cbp-border-size-md);
  --cbp-table-cell-padding: var(--cbp-space-4x) var(--cbp-space-3x);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-table[context*=dark],
[data-cbp-theme=dark] cbp-table:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-table-color: var(--cbp-table-color-dark);
  --cbp-table-header-color: var(--cbp-table-header-color-dark);
  --cbp-table-header-color-hover: var(--cbp-table-header-color-hover-dark);
  --cbp-table-header-color-focus: var(--cbp-table-header-color-focus-dark);
  --cbp-table-header-color-active: var(--cbp-table-header-color-active-dark);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-dark);
  --cbp-table-header-color-bg-hover: var(--cbp-table-header-color-bg-hover-dark);
  --cbp-table-header-color-bg-focus: var(--cbp-table-header-color-bg-focus-dark);
  --cbp-table-header-color-bg-active: var(--cbp-table-header-color-bg-active-dark);
  --cbp-table-header-color-outline: var(--cbp-table-header-color-outline-dark);
  --cbp-table-row-color-bg: var(--cbp-table-row-color-bg-dark);
  --cbp-table-row-color-bg-striped: var(--cbp-table-row-color-bg-striped-dark);
  --cbp-table-row-color-bg-hover: var(--cbp-table-row-color-bg-hover-dark);
  --cbp-table-row-color-bg-selected: var(--cbp-table-row-color-bg-selected-dark);
  --cbp-table-row-color-border: var(--cbp-table-row-color-border-dark);
}

cbp-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
cbp-table[striped=odd] tbody tr:nth-child(odd) {
  background-color: var(--cbp-table-row-color-bg-striped);
}
cbp-table[striped=even] tbody tr:nth-child(even) {
  background-color: var(--cbp-table-row-color-bg-striped);
}
cbp-table[hover=row] tbody tr:hover td {
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table[hover=cell] tbody td:hover {
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table[column-hover] table:has(thead tr > *:nth-child(1):hover) tr > *:nth-child(1):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(2):hover) tr > *:nth-child(2):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(3):hover) tr > *:nth-child(3):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(4):hover) tr > *:nth-child(4):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(5):hover) tr > *:nth-child(5):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(6):hover) tr > *:nth-child(6):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(7):hover) tr > *:nth-child(7):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(8):hover) tr > *:nth-child(8):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(9):hover) tr > *:nth-child(9):not([aria-sort]),
cbp-table[column-hover] table:has(thead tr > *:nth-child(10):hover) tr > *:nth-child(10):not([aria-sort]) {
  background-color: var(--cbp-table-row-color-bg-hover);
}
cbp-table table {
  margin: 0;
  padding: 0;
  max-width: 100%;
  border-collapse: collapse;
}
cbp-table table caption {
  text-align: left;
  font-size: var(--cbp-font-size-heading-xl);
  line-height: var(--cbp-line-height-xl);
}
cbp-table table th, cbp-table table td {
  color: var(--cbp-table-color);
  text-align: left;
  vertical-align: top;
  padding: var(--cbp-table-cell-padding);
}
cbp-table table th:has(input[type=checkbox]), cbp-table table td:has(input[type=checkbox]) {
  vertical-align: middle;
  padding-block: var(--cbp-space-2x);
}
cbp-table table th:has(button), cbp-table table td:has(button) {
  padding: 0;
}
cbp-table table th cbp-checkbox, cbp-table table td cbp-checkbox {
  --cbp-checkbox-min-height: 0;
  --cbp-checkbox-margin: 0;
}
cbp-table table thead th {
  font-size: var(--cbp-font-size-heading-xs);
  vertical-align: bottom;
  transition: width 2s;
}
cbp-table table thead th[aria-sort=none] button {
  padding-inline-end: var(--cbp-space-9x);
}
cbp-table table thead th:has(button:hover) {
  --cbp-table-header-color: var(--cbp-table-header-color-hover);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-hover);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-hover-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-hover-dark);
}
cbp-table table thead th:has(button:hover) cbp-button[fill][color] {
  --cbp-button-color-hover: var(--cbp-table-header-color-hover);
  --cbp-button-color-hover-dark: var(--cbp-table-header-color-hover-dark);
}
cbp-table table thead th:has(cbp-button[fill][color] button:focus) {
  --cbp-table-header-color: var(--cbp-table-header-color-focus);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-focus);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-focus-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-focus-dark);
  outline-width: var(--cbp-border-size-md);
}
cbp-table table thead th:has(cbp-button[fill][color] button:active) {
  --cbp-table-header-color: var(--cbp-table-header-color-active);
  --cbp-table-header-color-bg: var(--cbp-table-header-color-bg-active);
  --cbp-table-header-color-dark: var(--cbp-table-header-color-active-dark);
  --cbp-table-header-color-bg-dark: var(--cbp-table-header-color-bg-active-dark);
}
cbp-table table thead th cbp-button {
  --cbp-button-border-radius: 0;
  --cbp-button-border-width: 0;
  --cbp-button-focus-outline-width: 0;
  --cbp-button-color-bg: transparent !important;
  --cbp-button-color-bg-hover: transparent !important;
  --cbp-button-color-bg-focus: transparent !important;
  --cbp-button-color-bg-active: transparent !important;
  --cbp-button-color-bg-dark: transparent !important;
  --cbp-button-color-bg-hover-dark: transparent !important;
  --cbp-button-color-bg-focus-dark: transparent !important;
  --cbp-button-color-bg-active-dark: transparent !important;
  --cbp-button-padding: var(--cbp-table-cell-padding);
}
cbp-table table thead th cbp-button button {
  justify-content: flex-start;
  text-align: left;
  text-transform: unset;
  letter-spacing: unset;
  white-space: normal;
  text-wrap: balance;
  margin: 0;
  transition: width 2s;
}
cbp-table table thead th:has(button:hover) {
  --cbp-button-color-bg-hover: transparent !important;
  --cbp-button-color-bg-hover-dark: transparent !important;
}
cbp-table table thead th:has(button:focus) {
  --cbp-button-color-bg-focus: var(--cbp-color-interactive-focus-dark) !important;
  --cbp-button-color-bg-focus-dark: var(--cbp-color-interactive-focus-light) !important;
}
cbp-table table tbody tr {
  background-color: var(--cbp-table-row-color-bg);
}
cbp-table table tbody tr:has(input[type=checkbox]:checked) {
  background-color: var(--cbp-table-row-color-bg-selected);
}
cbp-table table tr {
  border-bottom: solid var(--cbp-table-row-border-size) var(--cbp-table-row-color-border);
}
cbp-table table th {
  --cbp-button-color: var(--cbp-table-header-color);
  --cbp-button-color-dark: var(--cbp-table-header-color-dark);
  color: var(--cbp-table-header-color);
  background-color: var(--cbp-table-header-color-bg);
  font-weight: var(--cbp-font-weight-medium);
  text-wrap: balance;
  outline-width: 0;
  outline-style: solid;
  outline-color: var(--cbp-table-header-color-outline);
  outline-offset: calc(var(--cbp-space-1x) * -1);
}
cbp-table table td {
  text-wrap: pretty;
}