@cbpds/web-components
Version:
Web components for the CBP Design System.
36 lines (35 loc) • 1.06 kB
CSS
/*
* 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-banner-color: var(--cbp-color-text-lightest);
@prop --cbp-banner-color-bg: var(--cbp-color-info-dark);
*/
:root {
--cbp-banner-color: var(--cbp-color-text-lightest);
--cbp-banner-color-bg: var(--cbp-color-info-dark);
}
cbp-banner {
display: flex;
flex-direction: row;
gap: var(--cbp-space-4x);
padding: var(--cbp-space-4x) var(--cbp-responsive-spacing-outer);
background-color: var(--cbp-banner-color-bg);
}
cbp-banner .cbp-banner-icon-container {
align-content: center;
}
cbp-banner .cbp-banner-text-container {
display: flex;
flex-grow: 1;
flex-direction: column;
color: var(--cbp-banner-color);
}
cbp-banner .cbp-banner-text-container > p {
margin-block-end: var(--cbp-space-3x);
}
cbp-banner[color=info] {
--cbp-banner-color-bg: var(--cbp-color-info-dark);
--cbp-banner-color: var(--cbp-color-text-lightest);
}