@cbpds/web-components
Version:
Web components for the CBP Design System.
43 lines (41 loc) • 1.44 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-app-header-color-background: var(--cbp-color-white)
* @prop --cbp-app-header-color-background-dark: var(--cbp-color-base-neutral-dark);
*/
:root {
--cbp-app-header-color-background: var(--cbp-color-white);
--cbp-app-header-color-background-dark: var(--cbp-color-base-neutral-dark);
}
/*
* Dark Mode - display dark design based on mode (no context).
* This toggle should have the highest specificity, so that what ever values were specified
* for the dark version get written to the light within the scope of this component.
*/
[data-cbp-theme=dark] cbp-app-header {
--cbp-app-header-color-background: var(--cbp-app-header-color-background-dark);
}
cbp-app-header {
min-height: var(--cbp-space-14x);
padding: 0 var(--cbp-responsive-spacing-outer);
background-color: var(--cbp-app-header-color-background);
box-shadow: var(--cbp-shadow-level-3-down);
z-index: var(--cbp-z-index-level-1);
position: sticky;
top: calc(-1 * var(--cbp-space-half-x));
display: block;
}
cbp-app-header nav {
display: flex;
align-items: center;
align-content: stretch;
width: max-content;
}
cbp-app-header .cbp-app-header-responsive {
align-items: center;
justify-content: space-between;
width: 100%;
}