@cbpds/web-components/dist/collection/components/cbp-action-bar/cbp-action-bar.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-action-bar-color: var(--cbp-color-text-darkest);
* @prop --cbp-action-bar-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-action-bar-color-bg: var(--cbp-color-grey-cool-70);
* @prop --cbp-action-bar-color-bg: var(--cbp-color-grey-cool-5);
* @prop --cbp-action-bar-floating-color-bg: var(--cbp-color-white);
* @prop --cbp-action-bar-floating-color-bg-dark: var(--cbp-color-gray-cool-90);
*/
:root {
  --cbp-action-bar-color: var(--cbp-color-text-darkest);
  --cbp-action-bar-color-dark: var(--cbp-color-text-lightest);
  --cbp-action-bar-color-bg: var(--cbp-color-gray-cool-5);
  --cbp-action-bar-color-bg-dark: var(--cbp-color-gray-cool-70);
  --cbp-action-bar-floating-color-bg: var(--cbp-color-white);
  --cbp-action-bar-floating-color-bg-dark: var(--cbp-color-gray-cool-90);
}

[data-cbp-theme=light] cbp-action-bar[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-action-bar:not([context=dark-inverts]):not([context=light-always]) {
  --cbp-action-bar-color: var(--cbp-action-bar-color-dark);
  --cbp-action-bar-color-bg: var(--cbp-action-bar-color-bg-dark);
  --cbp-action-bar-floating-color-bg: var(--cbp-action-bar-floating-color-bg-dark);
}

cbp-action-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: right;
  min-height: var(--cbp-space-14x);
  width: 100%;
  padding: var(--cbp-space-3x);
  color: var(--cbp-action-bar-color);
  background-color: var(--cbp-action-bar-color-bg);
  gap: var(--cbp-space-3x);
}
cbp-action-bar > *[slot=cbp-action-bar-info] {
  margin-inline-end: auto;
}
cbp-action-bar[variant=floating] {
  --cbp-action-bar-color-bg: var(--cbp-action-bar-floating-color-bg);
  --cbp-action-bar-color-bg-dark: var(--cbp-action-bar-floating-color-bg-dark);
  position: fixed;
  bottom: 0;
  left: 0;
  padding-inline: var(--cbp-responsive-spacing-outer);
  box-shadow: var(--cbp-shadow-level-3-up);
}