@cbpds/web-components
Version:
Web components for the CBP Design System.
49 lines (47 loc) • 1.5 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-breadcrumb-color: var(--cbp-color-text-darkest);
* @prop --cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
* @prop --cbp-breadcrumb-gap: var(--cbp-space-2x);
* @prop --cbp-breadcrumb-divider: "/";
*/
:root {
--cbp-breadcrumb-color: var(--cbp-color-text-darkest);
--cbp-breadcrumb-color-dark: var(--cbp-color-text-lightest);
--cbp-breadcrumb-gap: var(--cbp-space-2x);
--cbp-breadcrumb-divider: "/";
}
[data-cbp-theme=light] cbp-breadcrumb[context*=dark]:not([context=light-always]),
[data-cbp-theme=dark] cbp-breadcrumb:not([context=dark-inverts]):not([context=light-always]) {
--cbp-breadcrumb-color: var(--cbp-breadcrumb-color-dark);
}
cbp-breadcrumb {
color: var(--cbp-breadcrumb-color);
display: block;
}
cbp-breadcrumb nav {
display: flex;
align-items: center;
gap: var(--cbp-breadcrumb-gap);
width: max-content;
overflow: visible;
}
cbp-breadcrumb nav > *:not(:first-child)::before {
content: var(--cbp-breadcrumb-divider);
margin-inline-end: var(--cbp-breadcrumb-gap);
white-space: nowrap;
}
cbp-breadcrumb nav a {
white-space: nowrap;
}
cbp-breadcrumb nav > :first-child {
margin-inline-end: calc(var(--cbp-breadcrumb-gap) * -1);
}
cbp-breadcrumb nav cbp-menu:not([hidden]) {
display: flex;
align-items: center;
order: 1;
}