@cbpds/web-components
Version:
Web components for the CBP Design System.
65 lines (63 loc) • 1.78 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-menu-color-bg: var(--cbp-color-gray-cool-80);
* @prop --cbp-menu-color-bg-dark: var(--cbp-color-gray-cool-5);
* @prop --cbp-menu-gap: var(--cbp-space-3x);
*/
:root {
--cbp-menu-color-bg: var(--cbp-color-gray-cool-80);
--cbp-menu-color-bg-dark: var(--cbp-color-gray-cool-5);
--cbp-menu-gap: var(--cbp-space-3x);
}
[data-cbp-theme=light] cbp-menu[context*=dark],
[data-cbp-theme=dark] cbp-menu:not([context=dark-inverts]):not([context=light-always]) {
--cbp-menu-color-bg: var(--cbp-menu-color-bg-dark);
}
cbp-menu {
position: relative;
display: inline-block;
max-width: 100%;
/* The actual menu, positioned for mobile-first */
/* Menu Positioning for the larger breakpoints */
}
cbp-menu .cbp-menu__menu {
position: absolute;
top: 0;
left: 0;
display: block;
width: max-content;
padding: 0;
background: var(--cbp-menu-color-bg);
border-radius: var(--cbp-border-radius-softer);
box-shadow: var(--cbp-shadow-level-1-down);
z-index: var(--cbp-z-index-level-0);
}
@media (min-width: 37.5em) {
cbp-menu .cbp-menu__menu {
width: max-content;
max-width: max-content;
margin: 0;
}
cbp-menu[position=top-start] .cbp-menu__menu {
top: 100%;
left: 0;
transform: translate(0, -100%);
}
cbp-menu[position=top-end] .cbp-menu__menu {
top: 100%;
left: 100%;
transform: translate(-100%, -100%);
}
cbp-menu[position=bottom-start] .cbp-menu__menu {
top: 0;
left: 0;
}
cbp-menu[position=bottom-end] .cbp-menu__menu {
top: 0;
left: 100%;
transform: translate(-100%, 0);
}
}