@cbpds/web-components/dist/collection/components/cbp-list/cbp-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-list-padding: var(--cbp-space-4x);
   @prop --cbp-list-font-size: var(--cbp-font-size-body);
   @prop --cbp-list-item-line-height: var(--cbp-line-height-sm);
   @prop --cbp-list-item-padding-block: var(--cbp-space-half-x);

   @prop --cbp-list-item-color: var(--cbp-color-text-darkest);
   @prop --cbp-list-item-color-dark: var(--cbp-color-text-lightest);

   @prop --cbp-link-list-icon-color: var(--cbp-color-interactive-primary-dark);
   @prop --cbp-link-list-icon-color-dark: var(--cbp-color-interactive-primary-dark);
*/
:root {
  --cbp-list-padding: var(--cbp-space-4x);
  --cbp-list-font-size: var(--cbp-font-size-body);
  --cbp-list-item-line-height: var(--cbp-line-height-sm);
  --cbp-list-item-padding-block: var(--cbp-space-half-x);
  --cbp-list-item-color: var(--cbp-color-text-darkest);
  --cbp-list-item-color-dark: var(--cbp-color-text-lightest);
  --cbp-link-list-gutter: var(--cbp-space-9x);
  --cbp-link-list-icon-margin: calc(var(--cbp-space-5x) * -1);
  --cbp-link-list-icon-color: var(--cbp-color-interactive-primary-dark);
  --cbp-link-list-icon-color-dark: var(--cbp-color-interactive-primary-dark);
  --cbp-desc-list-color: var(--cbp-color-text-darker);
  --cbp-desc-list-color-dark: var(--cbp-color-text-lighter);
  --cbp-desc-list-description-color: var(--cbp-color-text-darkest);
  --cbp-desc-list-description-color-dark: var(--cbp-color-text-lightest);
}

[data-cbp-theme=light] cbp-list[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-list:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-list-item-color: var(--cbp-list-item-color-dark);
  --cbp-link-list-icon-color: var(--cbp-link-list-icon-color-dark);
  --cbp-desc-list-color: var(--cbp-desc-list-color-dark);
  --cbp-desc-list-description-color: var(--cbp-desc-list-description-color-dark);
}

cbp-list {
  font-size: var(--cbp-list-font-size);
}
cbp-list li {
  color: var(--cbp-list-item-color);
  font-weight: var(--cbp-font-weight-bold);
  line-height: var(--cbp-list-item-line-height);
  padding-block: var(--cbp-list-item-padding-block);
}
cbp-list[size=large] {
  --cbp-list-font-size: var(--cbp-font-size-heading-sm);
  --cbp-list-item-line-height: var(--cbp-line-height-md);
  --cbp-list-item-padding-block: var(--cbp-space-1x);
}
cbp-list ol, cbp-list ul {
  padding-inline-start: var(--cbp-list-padding);
}
cbp-list ul > li {
  list-style-type: disc;
}
cbp-list ul > li ul li {
  list-style-type: "- ";
}
cbp-list ol > li {
  list-style-type: decimal;
}
cbp-list ol > li ol li {
  list-style-type: upper-alpha;
}
cbp-list ol > li ol li ol {
  counter-reset: count;
}
cbp-list ol > li ol li ol li {
  counter-increment: count;
}
cbp-list ol > li ol li ol li::marker {
  content: counter(count, decimal) ") ";
}
cbp-list ol > li ol li ol li ol {
  counter-reset: count;
}
cbp-list ol > li ol li ol li ol li {
  counter-increment: count;
}
cbp-list ol > li ol li ol li ol li::marker {
  content: counter(count, lower-alpha) ". ";
}
cbp-list[variant=unstyled] ul, cbp-list[variant=unstyled] ol {
  padding-inline: 0;
}
cbp-list[variant=unstyled] ul li, cbp-list[variant=unstyled] ol li {
  list-style-type: none;
}
cbp-list[variant=link] ul {
  padding-inline-start: var(--cbp-link-list-gutter);
}
cbp-list[variant=link] ul li {
  list-style-type: none;
}
cbp-list[variant=link] ul li cbp-icon {
  margin-inline-start: var(--cbp-link-list-icon-margin);
  margin-inline-end: var(--cbp-space-1x);
}
cbp-list[variant=link][size=large] {
  --cbp-link-list-gutter: var(--cbp-space-11x);
  --cbp-link-list-icon-margin: calc(var(--cbp-space-6x) * -1);
  --cbp-list-item-line-height: var(--cbp-line-height-sm);
  --cbp-list-item-padding-block: var(--cbp-space-1x);
}
cbp-list[variant=icon] {
  padding-inline-start: var(--cbp-space-8x);
  font-size: var(--cbp-font-size-heading-sm);
  --cbp-list-padding: var(--cbp-space-6x);
}
cbp-list[variant=icon] li {
  list-style-type: none;
}
cbp-list[variant=icon] li cbp-icon {
  margin-inline-start: calc(var(--cbp-space-4x) * -1);
  padding-inline-end: var(--cbp-space-3x);
}
cbp-list dl {
  padding-inline-start: var(--cbp-space-12x);
}
cbp-list dl dt {
  color: var(--cbp-desc-list-color);
  font-size: var(--cbp-font-size-heading-sm);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-line-height-sm);
  padding-block-end: var(--cbp-space-2x);
}
cbp-list dl dt cbp-icon {
  margin-inline-start: calc(var(--cbp-space-9x) * -1);
  padding-inline-end: var(--cbp-space-3x);
}
cbp-list dl dd {
  color: var(--cbp-desc-list-description-color);
  line-height: var(--cbp-line-height-xs);
  padding-block-end: var(--cbp-space-6x);
}