@cbpds/web-components/dist/collection/components/cbp-structured-list/cbp-structured-list.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-structured-list-item-padding: var(--cbp-space-4x);

 * @prop --cbp-structured-list-color-background: var(--cbp-color-white);
 * @prop --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-80);
 * @prop --cbp-structured-list-color-striped-background: var(--cbp-color-gray-cool-4);
 * @prop --cbp-structured-list-color-striped-background-dark: var(--cbp-color-gray-cool-90);
 * @prop --cbp-structured-list-color-background-hover: var(--cbp-color-gray-cool-10);
 * @prop --cbp-structured-list-color-background-hover-dark: var(--cbp-color-gray-cool-90);
 * @prop --cbp-structured-list-color: var(--cbp-color-text-darkest);
 * @prop --cbp-structured-list-color-dark: var(--cbp-color-text-lightest);
 * @prop --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
 * @prop --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);

 * @prop --cbp-structured-list-header-color-background: var(--cbp-color-gray-cool-30);
 * @prop --cbp-structured-list-header-color-background-dark: var(--cbp-color-gray-cool-60);
 * @prop --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
 * @prop --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);

 * @prop --cbp-structured-list-footer-color-background: var(--cbp-color-gray-cool-70);
 * @prop --cbp-structured-list-footer-color-background-dark: var(--cbp-color-gray-cool-5);
 * @prop --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
 * @prop --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);

 * @prop --cbp-structured-list-margin-bottom: var(--cbp-space-4x);
*/
:root {
  --cbp-structured-list-item-padding: var(--cbp-space-4x);
  --cbp-structured-list-color-background: var(--cbp-color-white);
  --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-80);
  --cbp-structured-list-color-striped-background: var(--cbp-color-gray-cool-4);
  --cbp-structured-list-color-striped-background-dark: var(--cbp-color-gray-cool-90);
  --cbp-structured-list-color-background-hover: var(--cbp-color-gray-cool-10);
  --cbp-structured-list-color-background-hover-dark: var(--cbp-color-black);
  --cbp-structured-list-color: var(--cbp-color-text-darkest);
  --cbp-structured-list-color-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
  --cbp-structured-list-header-color-background: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-header-color-background-dark: var(--cbp-color-gray-cool-60);
  --cbp-structured-list-header-color: var(--cbp-color-text-darkest);
  --cbp-structured-list-header-color-dark: var(--cbp-color-text-lightest);
  --cbp-structured-list-footer-color-background: var(--cbp-color-gray-cool-70);
  --cbp-structured-list-footer-color-background-dark: var(--cbp-color-gray-cool-5);
  --cbp-structured-list-footer-color: var(--cbp-color-text-lightest);
  --cbp-structured-list-footer-color-dark: var(--cbp-color-text-darkest);
  --cbp-structured-list-item-padding: var(--cbp-space-4x);
  --cbp-structured-list-item-color-background-danger: var(--cbp-color-danger-lighter);
  --cbp-structured-list-item-color-background-danger-dark: var(--cbp-color-danger-darker);
  --cbp-structured-list-item-color-background-selected: var(--cbp-color-interactive-selected-light);
  --cbp-structured-list-item-color-background-selected-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-structured-list-margin-bottom: var(--cbp-space-4x);
}

[data-cbp-theme=light] cbp-structured-list[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-structured-list:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-structured-list-color-background: var(--cbp-structured-list-color-background-dark);
  --cbp-structured-list-color-striped-background: var(--cbp-structured-list-color-striped-background-dark);
  --cbp-structured-list-color-background-hover: var(--cbp-structured-list-color-background-hover-dark);
  --cbp-structured-list-color: var(--cbp-structured-list-color-dark);
  --cbp-structured-list-border-color: var(--cbp-structured-list-border-color-dark);
  --cbp-structured-list-header-color-background: var(--cbp-structured-list-header-color-background-dark);
  --cbp-structured-list-header-color: var(--cbp-structured-list-header-color-dark);
  --cbp-structured-list-footer-color-background: var(--cbp-structured-list-footer-color-background-dark);
  --cbp-structured-list-footer-color: var(--cbp-structured-list-footer-color-dark);
  --cbp-structured-list-item-color-background-danger: var(--cbp-structured-list-item-color-background-danger-dark);
  --cbp-structured-list-item-color-background-selected: var(--cbp-structured-list-item-color-background-selected-dark);
}

cbp-structured-list {
  display: block;
  background-color: var(--cbp-structured-list-color-background);
  color: var(--cbp-structured-list-color);
  margin-bottom: var(--cbp-structured-list-margin-bottom);
  /**Collection */
  /** Selectable */
}
cbp-structured-list [slot=cbp-structured-list-header] {
  color: var(--cbp-structured-list-header-color);
  background-color: var(--cbp-structured-list-header-color-background);
  font-style: italic;
  display: flex;
  align-items: center;
  padding: var(--cbp-space-3x);
  min-height: var(--cbp-space-13x);
  font-weight: var(--cbp-font-weight-bold);
}
cbp-structured-list [slot=cbp-structured-list-header] *:only-child {
  flex-basis: 100%;
}
cbp-structured-list[striped] [role=list] > *:nth-child(even) {
  background-color: var(--cbp-structured-list-color-striped-background);
}
cbp-structured-list div[role=list] > * {
  display: block;
  padding: var(--cbp-structured-list-item-padding);
  border-bottom-style: solid;
  border-bottom-width: var(--cbp-border-size-md);
  border-bottom-color: var(--cbp-structured-list-border-color);
}
cbp-structured-list div[role=list] > *:hover {
  background-color: var(--cbp-structured-list-color-background-hover) !important;
}
cbp-structured-list div[role=list]:only-child > *:first-child {
  border-top: var(--cbp-border-size-md) solid var(--cbp-structured-list-border-color);
}
cbp-structured-list[selectable] [slot=cbp-structured-list-header] {
  gap: var(--cbp-space-4x);
}
cbp-structured-list[selectable] cbp-structured-list-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--cbp-space-4x);
}
cbp-structured-list cbp-structured-list-item[selected] {
  --cbp-structured-list-color-background: var(--cbp-color-interactive-selected-light);
  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-color-background-dark: var(--cbp-color-interactive-selected-dark);
  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
}
cbp-structured-list cbp-structured-list-item[selected]:hover {
  --cbp-structured-list-color-background: var(--cbp-color-gray-cool-10);
  --cbp-structured-list-border-color: var(--cbp-color-gray-cool-30);
  --cbp-structured-list-color-background-dark: var(--cbp-color-gray-cool-90);
  --cbp-structured-list-border-color-dark: var(--cbp-color-gray-cool-50);
}
cbp-structured-list cbp-structured-list-item {
  display: block;
}
cbp-structured-list cbp-structured-list-item[color=danger]:not([selected]) {
  background-color: var(--cbp-structured-list-item-color-background-danger);
}
cbp-structured-list cbp-structured-list-item[selected] {
  background-color: var(--cbp-structured-list-item-color-background-selected);
}