@cbpds/web-components
Version:
Web components for the CBP Design System.
46 lines (45 loc) • 1.3 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
*/
cbp-universal-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
color-scheme: dark;
color: var(--cbp-color-text-lightest);
background-color: var(--cbp-color-branding-dhs-blue);
min-height: var(--cbp-space-16x);
width: 100%;
padding: 0 var(--cbp-responsive-spacing-outer);
}
cbp-universal-header .cbp-universal-header__brand {
align-items: center;
display: flex;
}
cbp-universal-header .cbp-universal-header__brand::after {
content: "CBP";
font-size: var(--cbp-font-size-heading-xl);
margin-left: var(--cbp-space-2x);
}
cbp-universal-header .cbp-universal-header__content ul,
cbp-universal-header .cbp-universal-header__content ol {
display: flex;
gap: var(--cbp-space-4x);
list-style: none;
margin: 0;
padding: 0;
}
cbp-universal-header .cbp-universal-header__content ul li,
cbp-universal-header .cbp-universal-header__content ol li {
display: inline;
}
@media (min-width: 37.5em) {
cbp-universal-header {
min-height: 4rem;
}
cbp-universal-header .cbp-universal-header__brand::after {
content: "";
}
}