@cbpds/web-components/dist/collection/components/cbp-panel/cbp-panel.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-panel-header-color: var(--cbp-color-text-lighter)
* @prop --cbp-panel-header-color-bg: var(--cbp-color-base-neutral-dark);
* @prop --cbp-panel-header-color-bottom-border: var(--cbp-color-gray-cool-70);
* @prop --cbp-panel-content-color: var(--cbp-color-text-darkest);
* @prop --cbp-panel-content-color-bg: var(--cbp-color-white);
* @prop --cbp-panel-content-color-border: var(--cbp-color-gray-cool-10);
* @prop --cbp-panel-border-radius: var(--cbp-border-radius-soft);
* @prop --cbp-panel-border-width: var(--cbp-border-size-md);

* @prop --cbp-panel-header-color-dark: var(--cbp-color-text-darker);
* @prop --cbp-panel-header-color-bg-dark: var(--cbp-color-gray-cool-10);
* @prop --cbp-panel-header-color-bottom-border-dark: var(--cbp-color-gray-cool-40);
* @prop --cbp-panel-content-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-panel-content-color-bg-dark: var(--cbp-color-gray-cool-70);
* @prop --cbp-panel-content-color-border-dark: var(--cbp-color-gray-cool-60);

* @prop --cbp-panel-border-radius: var(--cbp-border-radius-soft);
* @prop --cbp-panel-border-width: var(--cbp-border-size-md);
*/
:root {
  --cbp-panel-header-color: var(--cbp-color-text-lighter);
  --cbp-panel-header-color-bg: var(--cbp-color-base-neutral-dark);
  --cbp-panel-header-color-bottom-border: var(--cbp-color-gray-cool-70);
  --cbp-panel-content-color: var(--cbp-color-text-darkest);
  --cbp-panel-content-color-bg: var(--cbp-color-white);
  --cbp-panel-content-color-border: var(--cbp-color-gray-cool-10);
  --cbp-panel-header-color-dark: var(--cbp-color-text-darker);
  --cbp-panel-header-color-bg-dark: var(--cbp-color-gray-cool-10);
  --cbp-panel-header-color-bottom-border-dark: var(--cbp-color-gray-cool-40);
  --cbp-panel-content-color-dark: var(--cbp-color-text-lightest);
  --cbp-panel-content-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-panel-content-color-border-dark: var(--cbp-color-gray-cool-60);
  --cbp-panel-border-radius: var(--cbp-border-radius-soft);
  --cbp-panel-border-width: var(--cbp-border-size-md);
}

/* 
 * Dark Mode - display dark design based on mode or context
 */
[data-cbp-theme=light] cbp-panel[context*=dark],
[data-cbp-theme=dark] cbp-panel:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-panel-header-color: var(--cbp-panel-header-color-dark);
  --cbp-panel-header-color-bg: var(--cbp-panel-header-color-bg-dark);
  --cbp-panel-header-color-bottom-border: var(--cbp-panel-header-color-bottom-border-dark);
  --cbp-panel-content-color: var(--cbp-panel-content-color-dark);
  --cbp-panel-content-color-bg: var(--cbp-panel-content-color-bg-dark);
  --cbp-panel-content-color-border: var(--cbp-panel-content-color-border-dark);
}

cbp-panel {
  display: block;
}
cbp-panel .cbp-panel__header {
  color: var(--cbp-panel-header-color);
  background-color: var(--cbp-panel-header-color-bg);
  padding: var(--cbp-space-5x);
  border-bottom: solid var(--cbp-border-size-xl) var(--cbp-panel-header-color-bottom-border);
  border-radius: var(--cbp-panel-border-radius) var(--cbp-panel-border-radius) 0 0;
}
cbp-panel .cbp-panel__header cbp-typography :where(h1, h2, h3, h4, h5, h6) {
  color: inherit;
  font-size: var(--cbp-font-size-heading-lg);
  font-weight: var(--cbp-font-weight-medium);
  line-height: var(--cbp-space-7x);
}
cbp-panel .cbp-panel__header cbp-icon {
  --cbp-icon-size: var(--cbp-space-6x);
}
cbp-panel .cbp-panel__content {
  color: var(--cbp-panel-content-color);
  background-color: var(--cbp-panel-content-color-bg);
  padding: var(--cbp-space-5x);
  border: solid var(--cbp-panel-border-width) var(--cbp-panel-content-color-border);
  border-block-start-style: none;
  border-radius: 0 0 var(--cbp-panel-border-radius) var(--cbp-panel-border-radius);
}
cbp-panel .cbp-panel__content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}